<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 3. Semantics, structure, and APIs of HTML documents</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="infrastructure.html#infrastructure"><span class="secno">2</span> <span class="content">Common infrastructure</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics.html#semantics"><span class="secno">4</span> <span class="content">The elements of HTML</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
     <a href="dom.html#dom"><span class="secno">3</span> <span class="content">Semantics, structure, and APIs of HTML documents</span></a>
     <ol class="toc">
      <li>
       <a href="dom.html#documents"><span class="secno">3.1</span> <span class="content">Documents</span></a>
       <ol class="toc">
        <li><a href="dom.html#the-document-object"><span class="secno">3.1.1</span> <span class="content">The <span>Document</span> object</span></a>
        </li><li><a href="dom.html#resource-metadata-management"><span class="secno">3.1.2</span> <span class="content">Resource metadata management</span></a>
        </li><li><a href="dom.html#dom-tree-accessors"><span class="secno">3.1.3</span> <span class="content">DOM tree accessors</span></a>
        </li><li><a href="dom.html#loading-xml-documents"><span class="secno">3.1.4</span> <span class="content">Loading XML documents</span></a>
       </li></ol>
      </li><li>
       <a href="dom.html#elements"><span class="secno">3.2</span> <span class="content">Elements</span></a>
       <ol class="toc">
        <li><a href="dom.html#elements-semantics"><span class="secno">3.2.1</span> <span class="content">Semantics</span></a>
        </li><li><a href="dom.html#elements-in-the-dom"><span class="secno">3.2.2</span> <span class="content">Elements in the DOM</span></a>
        </li><li>
         <a href="dom.html#element-definitions"><span class="secno">3.2.3</span> <span class="content">Element definitions</span></a>
         <ol class="toc">
          <li><a href="dom.html#element-definitions-attributes"><span class="secno">3.2.3.1</span> <span class="content">Attributes</span></a>
         </li></ol>
        </li><li>
         <a href="dom.html#content-models"><span class="secno">3.2.4</span> <span class="content">Content models</span></a>
         <ol class="toc">
          <li><a href="dom.html#the-nothing-content-model"><span class="secno">3.2.4.1</span> <span class="content">The "nothing" content model</span></a>
          </li><li>
           <a href="dom.html#kinds-of-content"><span class="secno">3.2.4.2</span> <span class="content">Kinds of content</span></a>
           <ol class="toc">
            <li><a href="dom.html#kinds-of-content-metadata-content"><span class="secno">3.2.4.2.1</span> <span class="content">Metadata content</span></a>
            </li><li><a href="dom.html#kinds-of-content-flow-content"><span class="secno">3.2.4.2.2</span> <span class="content">Flow content</span></a>
            </li><li><a href="dom.html#kinds-of-content-sectioning-content"><span class="secno">3.2.4.2.3</span> <span class="content">Sectioning content</span></a>
            </li><li><a href="dom.html#kinds-of-content-heading-content"><span class="secno">3.2.4.2.4</span> <span class="content">Heading content</span></a>
            </li><li><a href="dom.html#kinds-of-content-phrasing-content"><span class="secno">3.2.4.2.5</span> <span class="content">Phrasing content</span></a>
            </li><li><a href="dom.html#kinds-of-content-embedded-content"><span class="secno">3.2.4.2.6</span> <span class="content">Embedded content</span></a>
            </li><li><a href="dom.html#kinds-of-content-interactive-content"><span class="secno">3.2.4.2.7</span> <span class="content">Interactive content</span></a>
            </li><li><a href="dom.html#sec-palpable-content"><span class="secno">3.2.4.2.8</span> <span class="content">Palpable content</span></a>
            </li><li><a href="dom.html#sec-script-supporting-elements"><span class="secno">3.2.4.2.9</span> <span class="content">Script-supporting elements</span></a>
           </li></ol>
          </li><li><a href="dom.html#transparent-content-models"><span class="secno">3.2.4.3</span> <span class="content">Transparent content models</span></a>
          </li><li><a href="dom.html#paragraphs"><span class="secno">3.2.4.4</span> <span class="content">Paragraphs</span></a>
         </li></ol>
        </li><li>
         <a href="dom.html#sec-global-attributes"><span class="secno">3.2.5</span> <span class="content"><span>Global attributes</span></span></a>
         <ol class="toc">
          <li><a href="dom.html#the-id-attribute"><span class="secno">3.2.5.1</span> <span class="content">The <span><code>id</code></span> attribute</span></a>
          </li><li><a href="dom.html#the-title-attribute"><span class="secno">3.2.5.2</span> <span class="content">The <code>title</code> attribute</span></a>
          </li><li><a href="dom.html#the-lang-and-xmllang-attributes"><span class="secno">3.2.5.3</span> <span class="content"> The <code><span>lang</span></code> and <code><span>xml:lang</span></code> attributes </span></a>
          </li><li><a href="dom.html#the-translate-attribute"><span class="secno">3.2.5.4</span> <span class="content">The <code>translate</code> attribute</span></a>
          </li><li><a href="dom.html#the-xmlbase-attribute-xml-only"><span class="secno">3.2.5.5</span> <span class="content">The <span><code>xml:base</code></span> attribute (XML only)</span></a>
          </li><li><a href="dom.html#the-dir-attribute"><span class="secno">3.2.5.6</span> <span class="content">The <code>dir</code> attribute</span></a>
          </li><li><a href="dom.html#classes"><span class="secno">3.2.5.7</span> <span class="content">The <span><code>class</code></span> attribute</span></a>
          </li><li><a href="dom.html#the-style-attribute"><span class="secno">3.2.5.8</span> <span class="content">The <span><code>style</code></span> attribute</span></a>
          </li><li><a href="dom.html#embedding-custom-non-visible-data-with-the-data-attributes"><span class="secno">3.2.5.9</span> <span class="content"><span>Embedding custom non-visible data</span> with the <code>data-*</code> attributes</span></a>
         </li></ol>
        </li><li>
         <a href="dom.html#requirements-relating-to-the-bidirectional-algorithm"><span class="secno">3.2.6</span> <span class="content"> Requirements relating to the bidirectional algorithm </span></a>
         <ol class="toc">
          <li><a href="dom.html#authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters"><span class="secno">3.2.6.1</span> <span class="content"> Authoring conformance criteria for bidirectional-algorithm formatting characters </span></a>
          </li><li><a href="dom.html#user-agent-conformance-criteria"><span class="secno">3.2.6.2</span> <span class="content">User agent conformance criteria</span></a>
         </li></ol>
        </li><li>
         <a href="dom.html#wai-aria"><span class="secno">3.2.7</span> <span class="content">WAI-ARIA and HTML Accessibility API Mappings</span></a>
         <ol class="toc">
          <li><a href="dom.html#aria-authoring-requirements"><span class="secno">3.2.7.1</span> <span class="content">ARIA Authoring Requirements</span></a>
          </li><li><a href="dom.html#aria-conformance-requirements"><span class="secno">3.2.7.2</span> <span class="content">Conformance Checker Implementation Requirements</span></a>
          </li><li>
           <a href="dom.html#user-agent-requirements"><span class="secno">3.2.7.3</span> <span class="content">User Agent Implementation Requirements</span></a>
           <ol class="toc">
            <li><a href="dom.html#aria-role-attribute"><span class="secno">3.2.7.3.1</span> <span class="content">ARIA Role Attribute</span></a>
            </li><li><a href="dom.html#state-and-property-attributes"><span class="secno">3.2.7.3.2</span> <span class="content">State and Property Attributes</span></a>
           </li></ol>
          </li><li><a href="dom.html#allowed-aria-roles-states-and-properties"><span class="secno">3.2.7.4</span> <span class="content">Allowed ARIA roles, states and properties</span></a>
         </li></ol>
       </li></ol>
     </li></ol>
    </li></ol>
  </nav><main><section>
    <h2 class="heading settled" data-level="3" id="dom"><span class="secno">3. </span><span class="content">Semantics, structure, and APIs of HTML documents</span><a class="self-link" href="dom.html#dom"></a></h2>
    <h3 class="heading settled" data-level="3.1" id="documents"><span class="secno">3.1. </span><span class="content">Documents</span><a class="self-link" href="dom.html#documents"></a></h3>
    <p>Every XML and HTML document in an HTML user agent is represented by a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object. <a data-link-type="biblio" href="references.html#biblio-dom">[DOM]</a></p>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="the document address|address|the document’s address|the address" data-noexport="" id="the-document-address">The document’s address</dfn> is the <i>URL associated with a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code></i> (as
  defined in the DOM standard). It is initially set when the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is created, but
  that can change during the lifetime of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>; for example, it changes when
  the user <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-4">navigates</a> to a <a data-link-type="dfn" href="browsers.html#fragment-identifier" id="ref-for-fragment-identifier-1">fragment identifier</a> on the page and when the <code>pushState()</code> method is called with a new <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a>. <a data-link-type="biblio" href="references.html#biblio-dom">[DOM]</a></p>
    <p class="warning"> Interactive user agents typically expose <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-3">the document’s address</a> in their user interface.
    This is the primary mechanism by which a user can tell if a site is attempting to impersonate
    another. </p>
    <p>When a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is created by a <a data-link-type="dfn" href="webappapis.html#concept-script" id="ref-for-concept-script-1">script</a> using the <code>createDocument()</code> or <code>createHTMLDocument()</code> APIs, <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-4">the document’s address</a> is the same as <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-5">the document’s address</a> of the <a data-link-type="dfn" href="webappapis.html#responsible-document" id="ref-for-responsible-document-1">responsible document</a> specified by the script’s <a data-link-type="dfn" href="webappapis.html#settings-object" id="ref-for-settings-object-1">settings object</a>, and the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is both <a data-link-type="dfn" href="syntax.html#ready-for-post-load-tasks" id="ref-for-ready-for-post-load-tasks-1">ready for post-load tasks</a> and <a data-link-type="dfn" href="syntax.html#completely-loaded" id="ref-for-completely-loaded-1">completely loaded</a> immediately.</p>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="the-documents-referrer">The document’s referrer</dfn> is an <a data-link-type="dfn" href="https://url.spec.whatwg.org/#syntax-url-absolute">absolute URL</a> that can be set when the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is created. If it is not explicitly set, then its value is the empty string.</p>
    <p>Each <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="reload-override-flag">reload override flag</dfn> that is originally unset.
  The flag is set by the <code>document.open()</code> and <a class="idl-code" data-link-type="method" href="webappapis.html#dom-document-write" id="ref-for-dom-document-write-1"><code>document.write()</code></a> methods in
  certain situations. When the flag is set, the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> also has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="reload-override-buffer">reload override buffer</dfn> which is a Unicode string that is used as the source of the
  document when it is reloaded.</p>
    <p>When the user agent is to perform <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="overridden reload|an overridden reload" data-noexport="" id="overridden-reload">an overridden reload</dfn>, given a <a data-link-type="dfn" href="browsers.html#source-browsing-context" id="ref-for-source-browsing-context-2">source browsing context</a>, it must act as follows:</p>
    <ol>
     <li data-md="">
      <p>Let <var>source</var> be the value of the <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-9">browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document" id="ref-for-active-document-2">active document</a>’s <a data-link-type="dfn" href="dom.html#reload-override-buffer" id="ref-for-reload-override-buffer-1">reload override buffer</a>.</p>
     </li><li data-md="">
      <p>Let <var>address</var> be the <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-10">browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document" id="ref-for-active-document-3">active document</a>’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-document-url">URL</a>.</p>
     </li><li data-md="">
      <p>Let <var>HTTPS state</var> be the <a data-link-type="dfn" href="dom.html#document-https-state" id="ref-for-document-https-state-1">HTTPS state</a> of the <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-11">browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document" id="ref-for-active-document-4">active document</a>.</p>
     </li><li data-md="">
      <p>Let <var>CSP list</var> be the <a data-link-type="dfn" href="dom.html#document-csp-list" id="ref-for-document-csp-list-1">CSP list</a> of the <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-12">browsing context</a>’s <a data-link-type="dfn" href="browsers.html#active-document" id="ref-for-active-document-5">active document</a>.</p>
     </li><li data-md="">
      <p><a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-5">Navigate</a> the <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-13">browsing context</a> to a new <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response">response</a> whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-body">body</a> is <var>source</var>, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-csp-list">CSP list</a> is <var>CSP list</var> and <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-https-state">HTTPS state</a> is <var>HTTPS state</var>, with the <a data-link-type="dfn" href="browsers.html#exceptions-enabled-flag" id="ref-for-exceptions-enabled-flag-1">exceptions enabled flag</a> and <a data-link-type="dfn" href="browsers.html#replacement-must-be-enabled" id="ref-for-replacement-must-be-enabled-1">replacement enabled</a>. The <a data-link-type="dfn" href="browsers.html#source-browsing-context" id="ref-for-source-browsing-context-3">source browsing context</a> is that given to the <a data-link-type="dfn" href="dom.html#overridden-reload" id="ref-for-overridden-reload-1">overridden reload</a> algorithm. When
  the <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-6">navigate</a> algorithm creates a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object for this purpose, set that <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="dom.html#reload-override-flag" id="ref-for-reload-override-flag-1">reload override flag</a> and set its <a data-link-type="dfn" href="dom.html#reload-override-buffer" id="ref-for-reload-override-buffer-2">reload override buffer</a> to <var>source</var>. Rethrow any exceptions.</p>
      <p>When it comes time to <a data-link-type="dfn" href="browsers.html#set-the-documents-address" id="ref-for-set-the-documents-address-1">set the document’s address</a> in the <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-7">navigation algorithm</a>,
  use <var>address</var> as the <a data-link-type="dfn" href="browsers.html#override-url" id="ref-for-override-url-1">override URL</a>.</p>
    </li></ol>
    <h4 class="heading settled" data-level="3.1.1" id="the-document-object"><span class="secno">3.1.1. </span><span class="content">The <dfn data-dfn-type="element" data-export="" id="elementdef-document">Document<a class="self-link" href="dom.html#elementdef-document"></a></dfn> object</span><a class="self-link" href="dom.html#the-document-object"></a></h4>
    <p>The DOM specification defines a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> interface, which this specification extends
  significantly:</p>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="enum" data-export="" id="enumdef-document-documentreadystate">DocumentReadyState</dfn> { <dfn class="s idl-code" data-dfn-for="DocumentReadyState" data-dfn-type="enum-value" data-export="" data-lt="&quot;loading&quot;|loading" id="dom-documentreadystate-loading">"loading"<a class="self-link" href="dom.html#dom-documentreadystate-loading"></a></dfn>, <dfn class="s idl-code" data-dfn-for="DocumentReadyState" data-dfn-type="enum-value" data-export="" data-lt="&quot;interactive&quot;|interactive" id="dom-documentreadystate-interactive">"interactive"<a class="self-link" href="dom.html#dom-documentreadystate-interactive"></a></dfn>, <dfn class="s idl-code" data-dfn-for="DocumentReadyState" data-dfn-type="enum-value" data-export="" data-lt="&quot;complete&quot;|complete" id="dom-documentreadystate-complete">"complete"<a class="self-link" href="dom.html#dom-documentreadystate-complete"></a></dfn> };

[<a class="nv idl-code" data-link-type="extended-attribute">OverrideBuiltins</a>]
<span class="kt">partial</span> /*sealed*/ <span class="kt">interface</span> <a class="nv idl-code" data-link-type="interface" href="https://www.w3.org/TR/dom/#document">Document</a> {
  // resource metadata management
  [<a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="browsers.html#dom-location-href" id="ref-for-dom-location-href-1">href</a>, <a class="nv idl-code" data-link-type="extended-attribute">Unforgeable</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="browsers.html#location-location" id="ref-for-location-location-1">Location</a>? <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="Location?" href="browsers.html#dom-document-location" id="ref-for-dom-document-location-1">location</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="browsers.html#dom-document-domain" id="ref-for-dom-document-domain-1">domain</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMString" href="dom.html#dom-document-referrer" id="ref-for-dom-document-referrer-1">referrer</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="dom.html#dom-document-cookie" id="ref-for-dom-document-cookie-1">cookie</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMString" href="dom.html#dom-document-lastmodified" id="ref-for-dom-document-lastmodified-1">lastModified</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="dom.html#enumdef-document-documentreadystate" id="ref-for-enumdef-document-documentreadystate-1">DocumentReadyState</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DocumentReadyState" href="dom.html#dom-document-readystate" id="ref-for-dom-document-readystate-1">readyState</a>;

  // DOM tree accessors
  <span class="kt">getter</span> <span class="kt">object</span> (<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/__getter__(name)" data-dfn-type="argument" data-export="" id="dom-document-__getter__-name-name">name<a class="self-link" href="dom.html#dom-document-__getter__-name-name"></a></dfn>);
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="dom.html#dom-document-title" id="ref-for-dom-document-title-1">title</a>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-document-dir">dir</dfn>;
  <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-4">HTMLElement</a>? <a class="nv idl-code" data-link-type="attribute" data-type="HTMLElement?" href="dom.html#dom-document-body" id="ref-for-dom-document-body-1">body</a>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="document-metadata.html#htmlheadelement-htmlheadelement" id="ref-for-htmlheadelement-htmlheadelement-1">HTMLHeadElement</a>? <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLHeadElement?" href="dom.html#dom-document-head" id="ref-for-dom-document-head-1">head</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-images" id="ref-for-dom-document-images-1">images</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-embeds" id="ref-for-dom-document-embeds-1">embeds</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-plugins" id="ref-for-dom-document-plugins-1">plugins</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-links" id="ref-for-dom-document-links-1">links</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-forms" id="ref-for-dom-document-forms-1">forms</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#htmlcollection">HTMLCollection</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLCollection" href="dom.html#dom-document-scripts" id="ref-for-dom-document-scripts-1">scripts</a>;
  <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#nodelist">NodeList</a> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="getElementsByName(elementName)" id="dom-document-getelementsbyname">getElementsByName<a class="self-link" href="dom.html#dom-document-getelementsbyname"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/getElementsByName(elementName)" data-dfn-type="argument" data-export="" id="dom-document-getelementsbyname-elementname-elementname">elementName<a class="self-link" href="dom.html#dom-document-getelementsbyname-elementname-elementname"></a></dfn>);
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="semantics-scripting.html#htmlscriptelement-htmlscriptelement" id="ref-for-htmlscriptelement-htmlscriptelement-2">HTMLScriptElement</a>? <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="HTMLScriptElement?" href="dom.html#dom-document-currentscript" id="ref-for-dom-document-currentscript-1">currentScript</a>;

  // dynamic markup insertion
  <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#document">Document</a> <a class="nv idl-code" data-link-type="method" href="webappapis.html#dom-document-_open" id="ref-for-dom-document-_open-1">open</a>(<span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/open(type, replace), Document/open(type), Document/open()" data-dfn-type="argument" data-export="" id="dom-document-open-type-replace-type">type<a class="self-link" href="dom.html#dom-document-open-type-replace-type"></a></dfn> = "text/html", <span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/open(type, replace), Document/open(type), Document/open()" data-dfn-type="argument" data-export="" id="dom-document-open-type-replace-replace">replace<a class="self-link" href="dom.html#dom-document-open-type-replace-replace"></a></dfn> = "");
  <a class="n" data-link-type="idl-name" href="browsers.html#windowproxy" id="ref-for-windowproxy-1">WindowProxy</a> <a class="nv idl-code" data-link-type="method" href="webappapis.html#dom-document-_open" id="ref-for-dom-document-_open-2">open</a>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/open(url, name, features, replace), Document/open(url, name, features)" data-dfn-type="argument" data-export="" id="dom-document-open-url-name-features-replace-url">url<a class="self-link" href="dom.html#dom-document-open-url-name-features-replace-url"></a></dfn>, <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/open(url, name, features, replace), Document/open(url, name, features)" data-dfn-type="argument" data-export="" id="dom-document-open-url-name-features-replace-name">name<a class="self-link" href="dom.html#dom-document-open-url-name-features-replace-name"></a></dfn>, <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/open(url, name, features, replace), Document/open(url, name, features)" data-dfn-type="argument" data-export="" id="dom-document-open-url-name-features-replace-features">features<a class="self-link" href="dom.html#dom-document-open-url-name-features-replace-features"></a></dfn>, <span class="kt">optional</span> <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document/open(url, name, features, replace), Document/open(url, name, features)" data-dfn-type="argument" data-export="" id="dom-document-open-url-name-features-replace-replace">replace<a class="self-link" href="dom.html#dom-document-open-url-name-features-replace-replace"></a></dfn> = <span class="kt">false</span>);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="webappapis.html#dom-document-close" id="ref-for-dom-document-close-1">close</a>();
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="webappapis.html#dom-document-write" id="ref-for-dom-document-write-2">write</a>(<span class="kt">DOMString</span>... <dfn class="nv idl-code" data-dfn-for="Document/write(text...), Document/write(text)" data-dfn-type="argument" data-export="" id="dom-document-write-text-text">text<a class="self-link" href="dom.html#dom-document-write-text-text"></a></dfn>);
  <span class="kt">void</span> <a class="nv idl-code" data-link-type="method" href="webappapis.html#dom-document-writeln" id="ref-for-dom-document-writeln-1">writeln</a>(<span class="kt">DOMString</span>... <dfn class="nv idl-code" data-dfn-for="Document/writeln(text...), Document/writeln(text)" data-dfn-type="argument" data-export="" id="dom-document-writeln-text-text">text<a class="self-link" href="dom.html#dom-document-writeln-text-text"></a></dfn>);

  // user interaction
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="browsers.html#windowproxy" id="ref-for-windowproxy-2">WindowProxy</a>? <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" data-readonly="" data-type="WindowProxy?" id="dom-document-defaultview">defaultView<a class="self-link" href="dom.html#dom-document-defaultview"></a></dfn>;
  <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#interface-element">Element</a>? <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" data-readonly="" data-type="Element?" id="dom-document-activeelement">activeElement<a class="self-link" href="dom.html#dom-document-activeelement"></a></dfn>;
  <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="method" href="editing.html#dom-document-hasfocus" id="ref-for-dom-document-hasfocus-1">hasFocus</a>();
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-document-designmode">designMode<a class="self-link" href="dom.html#dom-document-designmode"></a></dfn>;
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="execCommand(commandId, showUI, value)|execCommand(commandId, showUI)|execCommand(commandId)" id="dom-document-execcommand">execCommand<a class="self-link" href="dom.html#dom-document-execcommand"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/execCommand(commandId, showUI, value), Document/execCommand(commandId, showUI), Document/execCommand(commandId)" data-dfn-type="argument" data-export="" id="dom-document-execcommand-commandid-showui-value-commandid">commandId<a class="self-link" href="dom.html#dom-document-execcommand-commandid-showui-value-commandid"></a></dfn>, <span class="kt">optional</span> <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document/execCommand(commandId, showUI, value), Document/execCommand(commandId, showUI), Document/execCommand(commandId)" data-dfn-type="argument" data-export="" id="dom-document-execcommand-commandid-showui-value-showui">showUI<a class="self-link" href="dom.html#dom-document-execcommand-commandid-showui-value-showui"></a></dfn> = <span class="kt">false</span>, <span class="kt">optional</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/execCommand(commandId, showUI, value), Document/execCommand(commandId, showUI), Document/execCommand(commandId)" data-dfn-type="argument" data-export="" id="dom-document-execcommand-commandid-showui-value-value">value<a class="self-link" href="dom.html#dom-document-execcommand-commandid-showui-value-value"></a></dfn> = "");
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="queryCommandEnabled(commandId)" id="dom-document-querycommandenabled">queryCommandEnabled<a class="self-link" href="dom.html#dom-document-querycommandenabled"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/queryCommandEnabled(commandId)" data-dfn-type="argument" data-export="" id="dom-document-querycommandenabled-commandid-commandid">commandId<a class="self-link" href="dom.html#dom-document-querycommandenabled-commandid-commandid"></a></dfn>);
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="queryCommandIndeterm(commandId)" id="dom-document-querycommandindeterm">queryCommandIndeterm<a class="self-link" href="dom.html#dom-document-querycommandindeterm"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/queryCommandIndeterm(commandId)" data-dfn-type="argument" data-export="" id="dom-document-querycommandindeterm-commandid-commandid">commandId<a class="self-link" href="dom.html#dom-document-querycommandindeterm-commandid-commandid"></a></dfn>);
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="queryCommandState(commandId)" id="dom-document-querycommandstate">queryCommandState<a class="self-link" href="dom.html#dom-document-querycommandstate"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/queryCommandState(commandId)" data-dfn-type="argument" data-export="" id="dom-document-querycommandstate-commandid-commandid">commandId<a class="self-link" href="dom.html#dom-document-querycommandstate-commandid-commandid"></a></dfn>);
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="queryCommandSupported(commandId)" id="dom-document-querycommandsupported">queryCommandSupported<a class="self-link" href="dom.html#dom-document-querycommandsupported"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/queryCommandSupported(commandId)" data-dfn-type="argument" data-export="" id="dom-document-querycommandsupported-commandid-commandid">commandId<a class="self-link" href="dom.html#dom-document-querycommandsupported-commandid-commandid"></a></dfn>);
  <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-lt="queryCommandValue(commandId)" id="dom-document-querycommandvalue">queryCommandValue<a class="self-link" href="dom.html#dom-document-querycommandvalue"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="Document/queryCommandValue(commandId)" data-dfn-type="argument" data-export="" id="dom-document-querycommandvalue-commandid-commandid">commandId<a class="self-link" href="dom.html#dom-document-querycommandvalue-commandid-commandid"></a></dfn>);

  // special event handler IDL attributes that only apply to Document objects
  [<a class="nv idl-code" data-link-type="extended-attribute">LenientThis</a>] <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="webappapis.html#typedefdef-eventhandlernonnull-eventhandler" id="ref-for-typedefdef-eventhandlernonnull-eventhandler-1">EventHandler</a> <dfn class="nv idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" data-type="EventHandler" id="dom-document-onreadystatechange">onreadystatechange<a class="self-link" href="dom.html#dom-document-onreadystatechange"></a></dfn>;
};
<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#document">Document</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="webappapis.html#globaleventhandlers-globaleventhandlers" id="ref-for-globaleventhandlers-globaleventhandlers-1">GlobalEventHandlers</a>;
<a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#document">Document</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="webappapis.html#documentandelementeventhandlers-documentandelementeventhandlers" id="ref-for-documentandelementeventhandlers-documentandelementeventhandlers-1">DocumentAndElementEventHandlers</a>;
</pre>
    <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has an <dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport="" id="document-https-state">HTTPS state</dfn> (an <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-https-state-value">HTTPS state value</a>),
  initially "<code>none</code>", which represents the security properties of the network channel
  used to deliver the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s data.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has a <dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport="" id="document-csp-list">CSP list</dfn>, which is a list of <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#policy">Content Security Policy</a> objects active in this context. The list is empty unless otherwise
  specified.</p>
    <h4 class="heading settled" data-level="3.1.2" id="resource-metadata-management"><span class="secno">3.1.2. </span><span class="content">Resource metadata management</span><a class="self-link" href="dom.html#resource-metadata-management"></a></h4>
    <dl class="domintro">
     <dt><var>document</var> . <code>referrer</code>
     </dt><dd>
       Returns <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-6">the address</a> of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> from which the user navigated to this one,
      unless it was blocked or there was no such document, in which case it returns the empty
      string. 
      <p>The <code>noreferrer</code> link type can be used to block the referrer.</p>
    </dd></dl>
    <div class="impl"> The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-referrer"><code>referrer</code></dfn> attribute must return <a data-link-type="dfn" href="dom.html#the-documents-referrer" id="ref-for-the-documents-referrer-1">the document’s referrer</a>. </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>cookie</code> [ = <var>value</var> ]
     </dt><dd>
       Returns the HTTP cookies that apply to the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. If there are no cookies or cookies
      can’t be applied to this resource, the empty string will be returned. 
      <p>Can be set, to add a new cookie to the element’s set of HTTP cookies.</p>
      <p>If the contents are <a data-link-type="dfn" href="browsers.html#sandboxed-into-a-unique-origin" id="ref-for-sandboxed-into-a-unique-origin-1">sandboxed into a unique origin</a> (e.g., in an <code>iframe</code> with
      the <code><a data-link-type="element-sub" href="semantics-embedded-content.html#element-attrdef-iframe-sandbox" id="ref-for-element-attrdef-iframe-sandbox-2">sandbox</a></code> attribute), a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> will be thrown on
      getting and setting.</p>
    </dd></dl>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-cookie"><code>cookie</code></dfn> attribute represents the cookies of
  the resource identified by <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-7">the document’s address</a>.</p>
    <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object that falls into one of the following conditions is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="cookie-averse|sandbox cookies" data-noexport="" id="cookie-averse">cookie-averse <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object</dfn>:</p>
    <ul>
     <li data-md="">
      <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that has no <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-14">browsing context</a>.</p>
     </li><li data-md="">
      <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> whose <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-8">address</a> does not use a server-based naming authority.</p>
    </li></ul>
    <p>On getting, if the document is a <a data-link-type="dfn" href="dom.html#cookie-averse" id="ref-for-cookie-averse-1">cookie-averse <code>Document</code> object</a>, then
  the user agent must return the empty string. Otherwise, if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-3">origin</a> is an <a data-link-type="dfn" href="browsers.html#opaque-origin" id="ref-for-opaque-origin-1">opaque origin</a>, the user agent must throw a
  "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code>. Otherwise, the user agent must return the <a data-link-type="dfn" href="infrastructure.html#cookie-string" id="ref-for-cookie-string-1">cookie-string</a> for <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-9">the document’s address</a> for a "non-HTTP" API, decoded
  using <a data-link-type="dfn" href="infrastructure.html#utf-8-decode-without-bom" id="ref-for-utf-8-decode-without-bom-2">UTF-8 decode without BOM</a>. <a data-link-type="biblio" href="references.html#biblio-cookies">[COOKIES]</a> <a class="fingerprint" href="introduction.html#fingerprinting-vector" id="ref-for-fingerprinting-vector-5"><img alt="(This is a fingerprinting vector.)" height="21" src="images/fingerprint.png" width="15"></a></p>
    <p>On setting, if the document is a <a data-link-type="dfn" href="dom.html#cookie-averse" id="ref-for-cookie-averse-2">cookie-averse <code>Document</code> object</a>, then
  the user agent must do nothing. Otherwise, if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-4">origin</a> is
  an <a data-link-type="dfn" href="browsers.html#opaque-origin" id="ref-for-opaque-origin-2">opaque origin</a>, the user agent must throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code>.
  Otherwise, the user agent must act as it would when <a data-link-type="dfn" href="https://tools.ietf.org/html/rfc6265#section-4.1">receiving a set-cookie-string</a> for <a data-link-type="dfn" href="dom.html#the-document-address" id="ref-for-the-document-address-10">the document’s address</a> via a "non-HTTP" API, consisting of the new value <a data-link-type="dfn" href="https://www.w3.org/TR/encoding/#utf-8-encoder">encoded as UTF-8</a>. <a data-link-type="biblio" href="references.html#biblio-cookies">[COOKIES]</a> <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
    <p class="note" role="note"> Since the <code>cookie</code> attribute is accessible across frames, the path restrictions on
    cookies are only a tool to help manage which cookies are sent to which parts of the site, and
    are not in any way a security feature. </p>
    <p class="warning"> The <code>cookie</code> attribute’s getter and setter synchronously access shared state. Since
    there is no locking mechanism, other browsing contexts in a multiprocess user agent can modify
    cookies while scripts are running. A site could, for instance, try to read a cookie, increment
    its value, then write it back out, using the new value of the cookie as a unique identifier
    for the session; if the site does this twice in two different browser windows at the same
    time, it might end up using the same "unique" identifier for both sessions, with potentially
    disastrous effects. </p>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>lastModified</code>
     </dt><dd>
       Returns the date of the last modification to the document, as reported by the server, in the
      form "<code>MM/DD/YYYY&nbsp;hh:mm:ss</code>", in the user’s local time zone. 
      <p>If the last modification date is not known, the current time is returned instead.</p>
    </dd></dl>
    <div class="impl">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-lastmodified"><code>lastModified</code></dfn> attribute, on getting, must return the date and time of
    the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s source file’s last modification, in the user’s local time zone, in
    the following format: 
     <ol>
      <li data-md="">
       <p>The month component of the date.</p>
      </li><li data-md="">
       <p>A U+002F SOLIDUS character (/).</p>
      </li><li data-md="">
       <p>The day component of the date.</p>
      </li><li data-md="">
       <p>A U+002F SOLIDUS character (/).</p>
      </li><li data-md="">
       <p>The year component of the date.</p>
      </li><li data-md="">
       <p>A U+0020 SPACE character.</p>
      </li><li data-md="">
       <p>The hours component of the time.</p>
      </li><li data-md="">
       <p>A U+003A COLON character (:).</p>
      </li><li data-md="">
       <p>The minutes component of the time.</p>
      </li><li data-md="">
       <p>A U+003A COLON character (:).</p>
      </li><li data-md="">
       <p>The seconds component of the time.</p>
     </li></ol>
     <p>All the numeric components above, other than the year, must be given as two <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-61">ASCII digits</a> representing the number in base ten, zero-padded if necessary. The year must be given as the
    shortest possible string of four or more <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-62">ASCII digits</a> representing the number in base
    ten, zero-padded if necessary.</p>
     <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>'s source file’s last modification date and time must be derived from
    relevant features of the networking protocols used, e.g., from the value of the HTTP <code>Last-Modified</code> header of the document, or from metadata in the file system for local
    files. If the last modification date and time are not known, the attribute must return the
    current date and time in the above format.</p>
    </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>readyState</code>
     </dt><dd>
       Returns "<code>loading</code>" while the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is loading, "<code>interactive</code>"
      once it is finished parsing but still loading sub-resources, and "<code>complete</code>" once
      it has loaded. 
      <p>The <code>readystatechange</code> event fires on the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object when this value
      changes.</p>
    </dd></dl>
    <div class="impl">
      Each document has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="current-document-readiness">current document readiness</dfn>. When a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object
    is created, it must have its <a data-link-type="dfn" href="dom.html#current-document-readiness" id="ref-for-current-document-readiness-2">current document readiness</a> set to the string
    "<code>loading</code>" if the document is associated with an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-2">HTML parser</a>, an <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-1">XML parser</a>, or an XSLT processor, and to the string "<code>complete</code>"
    otherwise. Various algorithms during page loading affect this value. When the value is set, the
    user agent must <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-1">fire a simple event</a> named <code>readystatechange</code> at the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object. 
     <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is said to have an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="active-parser">active parser</dfn> if it is associated with an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-3">HTML parser</a> or an <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-2">XML parser</a> that has not yet been <a data-link-type="dfn" href="syntax.html#stopped" id="ref-for-stopped-2">stopped</a> or</p>
      <a data-link-type="dfn" href="browsers.html#abort-the-document" id="ref-for-abort-the-document-1">aborted</a>. 
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-readystate"><code>readyState</code></dfn> IDL attribute must, on getting, return the <a data-link-type="dfn" href="dom.html#current-document-readiness" id="ref-for-current-document-readiness-3">current
    document readiness</a>.</p>
    </div>
    <h4 class="heading settled" data-level="3.1.3" id="dom-tree-accessors"><span class="secno">3.1.3. </span><span class="content">DOM tree accessors</span><a class="self-link" href="dom.html#dom-tree-accessors"></a></h4>
    <p>The <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-3">html</a></code> element of a document is the document’s root element, if there is
  one and it’s an <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-4">html</a></code> element, or null otherwise.</p>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>head</code>
     </dt><dd>Returns the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-5">head</a></code> element.
    </dd></dl>
    <p>The <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-6">head</a></code> element of a document is the first <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-7">head</a></code> element that
  is a child of the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-5">html</a></code> element, if there is one, or null otherwise.</p>
    <div class="impl"> The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-head"><code>head</code></dfn> attribute, on getting, must return
    the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-8">head</a></code> element of the document (a <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-9">head</a></code> element or null). </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>title</code> [ = <var>value</var> ]
     </dt><dd>
       Returns the document’s title, as given by the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-3"><code>title</code></a> element for HTML and
      as given by the SVG <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#DescriptionAndTitleElements"><code>title</code></a> element for SVG. 
      <p>Can be set, to update the document’s title. If there is no appropriate element to update, the
      new value is ignored.</p>
    </dd></dl>
    <p>The <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-4"><code>title</code></a> element of a document is the first <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-5"><code>title</code></a> element
  in the document (in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-14">tree order</a>), if there is one, or null otherwise.</p>
    <div class="impl">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-title"><code>title</code></dfn> attribute must, on getting, run the following algorithm: 
     <ol>
      <li data-md="">
       <p>If the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-9">root element</a> is an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-1">svg</a></code> element in the <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-1">SVG namespace</a>, then
let <var>value</var> be a concatenation of the data of all the child <code>Text</code> nodes
of the first <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#DescriptionAndTitleElements"><code>title</code></a> element in the <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-2">SVG namespace</a> that is a child of the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-10">root element</a>. <a data-link-type="biblio" href="references.html#biblio-svg11">[SVG11]</a></p>
      </li><li data-md="">
       <p>Otherwise, let <var>value</var> be a concatenation of the data of all the child <code>Text</code> nodes of the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-6"><code>title</code></a> element, in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-15">tree order</a>, or
the empty string if the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-7"><code>title</code></a> element is null.</p>
      </li><li data-md="">
       <p><a data-link-type="dfn" href="infrastructure.html#stripping-and-collapsing-whitespace" id="ref-for-stripping-and-collapsing-whitespace-1">Strip and collapse whitespace</a> in <var>value</var>.</p>
      </li><li data-md="">
       <p>Return <var>value</var>.</p>
     </li></ol>
     <p>On setting, the steps corresponding to the first matching condition in the following list must
    be run:</p>
     <dl class="switch">
      <dt> If the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-11">root element</a> is an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-2">svg</a></code> element in the <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-3">SVG namespace</a> <a data-link-type="biblio" href="references.html#biblio-svg11">[SVG11]</a> 
      </dt><dd>
       <ol>
        <li data-md="">
         <p>Let <var>element</var> be the first <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#DescriptionAndTitleElements"><code>title</code></a> element in the <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-4">SVG namespace</a> that is a child of the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-12">root element</a>, if any. If there isn’t
one, create a <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#DescriptionAndTitleElements"><code>title</code></a> element in the <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-5">SVG namespace</a>, insert it as the
first child of the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-13">root element</a>, and let <var>element</var> be that element. <a data-link-type="biblio" href="references.html#biblio-svg11">[SVG11]</a></p>
        </li><li data-md="">
         <p>Act as if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute of <var>element</var> was set to the
new value being assigned.</p>
       </li></ol>
      </dd><dt>If the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-14">root element</a> is in the <a data-link-type="dfn" href="infrastructure.html#html-namespace" id="ref-for-html-namespace-7">HTML namespace</a>
      </dt><dd>
       <ol>
        <li data-md="">
         <p>If the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-8"><code>title</code></a> element is null and the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-10">head</a></code> element
is null, then abort these steps.</p>
        </li><li data-md="">
         <p>If the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-9"><code>title</code></a> element is null, then create a new <code>title</code> element and <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-append">append</a> it to the <code><a data-link-type="element" href="document-metadata.html#elementdef-head" id="ref-for-elementdef-head-11">head</a></code> element, and let <var>element</var> be the newly created element; otherwise, let <var>element</var> be
the <a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-10"><code>title</code></a> element.</p>
        </li><li data-md="">
         <p>Act as if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-node-textcontent">textContent</a></code> IDL attribute of <var>element</var> was set to the
new value being assigned.</p>
       </li></ol>
      </dd><dt>Otherwise
      </dt><dd>Do nothing.
     </dd></dl>
    </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>body</code> [ = <var>value</var> ]
     </dt><dd>
       Returns the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-8">body</a></code> element. 
      <p>Can be set, to replace the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-9">body</a></code> element.</p>
      <p>If the new value is not a <code>body</code> or <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-2">frameset</a></code> element, this will throw
      a <code>HierarchyRequestError</code> exception.</p>
    </dd></dl>
    <p>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-10">body</a></code> element of a document is the first child of
  the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-6">html</a></code> element that is either a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-11">body</a></code> element or a <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-3">frameset</a></code> element. If there is no such element, it is null.</p>
    <div class="impl">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-body"><code>body</code></dfn> attribute, on getting, must return the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-12">body</a></code> element of
    the document (either a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-13">body</a></code> element, a <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-4">frameset</a></code> element, or null). On
    setting, the following algorithm must be run: 
     <ol>
      <li data-md="">
       <p>If the new value is not a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-14">body</a></code> or <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-5">frameset</a></code> element, then throw a <code>HierarchyRequestError</code> exception and abort these steps.</p>
      </li><li data-md="">
       <p>Otherwise, if the new value is the same as the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-15">body</a></code> element, do nothing. Abort these
steps.</p>
      </li><li data-md="">
       <p>Otherwise, if the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-16">body</a></code> element is not null, then replace that element with the new
value in the DOM, as if the root element’s <code>replaceChild()</code> method had been
called with the new value and the incumbent <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-17">body</a></code> element as its two arguments
respectively, then abort these steps.</p>
      </li><li data-md="">
       <p>Otherwise, if there is no root element, throw a <code>HierarchyRequestError</code> exception
and abort these steps.</p>
      </li><li data-md="">
       <p>Otherwise, the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-18">body</a></code> element is null, but there’s a root element. Append the new value
to the root element.</p>
     </li></ol>
    </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>images</code>
     </dt><dd> Returns an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-6">img</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. 
     </dd><dt><var>document</var> . <code>embeds</code>
     </dt><dt><var>document</var> . <code>plugins</code>
     </dt><dd> Return an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-3">embed</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. 
     </dd><dt><var>document</var> . <code>links</code>
     </dt><dd> Returns an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-5">a</a></code> and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-2">area</a></code> elements in
      the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that have <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-5">href</a></code> attributes. 
     </dd><dt><var>document</var> . <code>forms</code>
     </dt><dd> Return an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-6">form</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. 
     </dd><dt><var>document</var> . <code>scripts</code>
     </dt><dd> Return an <code>HTMLCollection</code> of the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-9">script</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. 
    </dd></dl>
    <div class="impl">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-images"><code>images</code></dfn> attribute must return an <code>HTMLCollection</code> rooted
    at the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node, whose filter matches only <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-7">img</a></code> elements. 
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-embeds"><code>embeds</code></dfn> attribute must return an <code>HTMLCollection</code> rooted
    at the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node, whose filter matches only <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-4">embed</a></code> elements.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-plugins"><code>plugins</code></dfn> attribute must return the same object as that returned by
    the <code>embeds</code> attribute.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-links"><code>links</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at
    the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node, whose filter matches only <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-6">a</a></code> elements with <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-6">href</a></code> attributes and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-3">area</a></code> elements with <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-7">href</a></code> attributes.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-forms"><code>forms</code></dfn> attribute must return an <code>HTMLCollection</code> rooted at
    the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node, whose filter matches only <code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-7">form</a></code> elements.</p>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-scripts"><code>scripts</code></dfn> attribute must return an <code>HTMLCollection</code> rooted
    at the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node, whose filter matches only <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-10">script</a></code> elements.</p>
     <hr>
    </div>
    <dl class="domintro">
     <dt> <var>collection</var> = <var>document</var> . <code>getElementsByName</code>(<var>name</var>) 
     </dt><dd> Returns a <code>NodeList</code> of elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that have a <code>name</code> attribute with the value <var>name</var>. 
    </dd></dl>
    <div class="impl"> The <dfn class="css" data-dfn-type="function" data-export="" data-lt="getElementsByName()" id="funcdef-getelementsbyname"><code>getElementsByName(<var>name</var>)</code><a class="self-link" href="dom.html#funcdef-getelementsbyname"></a></dfn> method takes a string <var>name</var>, and must return a <a data-link-type="dfn" href="infrastructure.html#live" id="ref-for-live-2">live</a> <code>NodeList</code> containing all the <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-1">html elements</a> in that document that have a <code>name</code> attribute whose value is
    equal to the <var>name</var> argument (in a <a data-link-type="dfn" href="infrastructure.html#case-sensitive" id="ref-for-case-sensitive-3">case-sensitive</a> manner), in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-16">tree order</a>.
    When the method is invoked on a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object again with the same argument, the
    user agent may return the same as the object returned by the earlier call. In other cases, a new <code>NodeList</code> object must be returned. </div>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>currentScript</code>
     </dt><dd>
       Returns the <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-11">script</a></code> element that is currently executing. In the case of reentrant <code>script</code> execution, returns the one that most recently started executing amongst
      those that have not yet finished executing. 
      <p>Returns null if the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is not currently executing a <code>script</code> element (e.g., because the running script is an event handler, or a timeout).</p>
    </dd></dl>
    <div class="impl"> The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-currentscript"><code>currentScript</code></dfn> attribute, on getting, must return the value to which
    it was most recently initialized. When the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is created, the <code>currentScript</code> must be initialized to null. </div>
    <div class="impl">
     <hr>
     <p>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> interface <a data-link-type="dfn" href="https://www.w3.org/TR/WebIDL/#dfn-support-named-properties">supports named properties</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/WebIDL/#dfn-supported-property-names">supported property names</a> at any moment consist of the values of the <code>name</code> content attributes of all the <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-2">applet</a></code>, <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-1">exposed</a> <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-5">embed</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-8">form</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-6">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-8">img</a></code>, and <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-2">exposed</a> <code>object</code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that have non-empty <code>name</code> content attributes,
    and the values of the <code>id</code> content attributes of all the <code>applet</code> and <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-3">exposed</a> <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-3">object</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that have non-empty <code>id</code> content attributes, and the values of the <code>id</code> content attributes of
    all the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-9">img</a></code> elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> that have both non-empty <code>name</code> content attributes and non-empty <code>id</code> content attributes. The <a data-link-type="dfn" href="https://www.w3.org/TR/WebIDL/#dfn-supported-property-names">supported property names</a> must be in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-17">tree order</a>, ignoring later duplicates, with
    values from <code>id</code> attributes coming before values from <code>name</code> attributes
    when the same element contributes both.</p>
     <p>To <a data-link-type="dfn" href="https://www.w3.org/TR/WebIDL/#dfn-determine-the-value-of-a-named-property">determine the value of a named property</a> <var>name</var> when <dfn data-dfn-type="dfn" data-noexport="" id="the-document-object-is-indexed-for-property-retrieval">the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object is indexed for property retrieval<a class="self-link" href="dom.html#the-document-object-is-indexed-for-property-retrieval"></a></dfn>, the user agent
    must return the value obtained using the following steps:</p>
     <ol>
      <li data-md="">
       <p>Let <var>elements</var> be the list of <a data-link-type="dfn" href="dom.html#named-elements" id="ref-for-named-elements-1">named elements</a> with the name <var>name</var> in
the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>.</p>
       <p class="note" role="note">There will be at least one such element, by definition.</p>
      </li><li data-md="">
       <p>If <var>elements</var> has only one element, and that element is an <code>iframe</code> element, then return the <code>WindowProxy</code> object of the <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-1">nested browsing context</a> represented by that <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-7">iframe</a></code> element, and abort
these steps.</p>
      </li><li data-md="">
       <p>Otherwise, if <var>elements</var> has only one element, return that element and abort these
steps.</p>
      </li><li data-md="">
       <p>Otherwise return an <code>HTMLCollection</code> rooted at the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> node,
whose filter matches only <a data-link-type="dfn" href="dom.html#named-elements" id="ref-for-named-elements-2">named elements</a> with the name <var>name</var>.</p>
     </li></ol>
     <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="named-elements">Named elements</dfn> with the name <var>name</var>, for the purposes of the above
    algorithm, are those that are either:</p>
     <ul>
      <li data-md="">
       <p><code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-3">applet</a></code>, <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-4">exposed</a> <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-6">embed</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-9">form</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-8">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-10">img</a></code>, or <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-5">exposed</a> <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-4">object</a></code> elements that
have a <code>name</code> content attribute whose value is <var>name</var>, or</p>
      </li><li data-md="">
       <p><code>applet</code> or <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-6">exposed</a> <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-5">object</a></code> elements that have an <code>id</code> content attribute whose value is <var>name</var>, or</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-11">img</a></code> elements that have an <code>id</code> content attribute whose value is <var>name</var>, and that have a non-empty <code>name</code> content attribute present also.</p>
     </li></ul>
     <p>An <code>embed</code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-6">object</a></code> element is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="exposed">exposed</dfn> if it has
    no <a data-link-type="dfn" href="dom.html#exposed" id="ref-for-exposed-7">exposed</a> <code>object</code> ancestor, and, for <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-7">object</a></code> elements, is
    additionally either not showing its <a data-link-type="dfn" href="dom.html#fallback-content" id="ref-for-fallback-content-1">fallback content</a> or has no <code>object</code> or <code>embed</code> descendants.</p>
    </div>
    <hr>
    <p class="note" role="note"> The <code>dir</code> attribute on the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> interface is defined along with the <code>dir</code> content attribute. </p>
    <div class="impl">
     <h4 class="heading settled" data-level="3.1.4" id="loading-xml-documents"><span class="secno">3.1.4. </span><span class="content">Loading XML documents</span><a class="self-link" href="dom.html#loading-xml-documents"></a></h4>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">partial</span> <span class="kt">interface</span> <a class="nv idl-code" data-link-type="interface" href="https://www.w3.org/TR/dom/#xmldocument">XMLDocument</a> {
  <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="XMLDocument" data-dfn-type="method" data-export="" data-lt="load(url)" id="dom-xmldocument-load">load<a class="self-link" href="dom.html#dom-xmldocument-load"></a></dfn>(<span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="XMLDocument/load(url)" data-dfn-type="argument" data-export="" id="dom-xmldocument-load-url-url">url<a class="self-link" href="dom.html#dom-xmldocument-load-url-url"></a></dfn>);
};
</pre>
     <p>The <dfn class="css" data-dfn-type="function" data-export="" data-lt="load()" id="funcdef-load"><code>load(<var>url</var>)</code><a class="self-link" href="dom.html#funcdef-load"></a></dfn> method must run the following steps:</p>
     <ol>
      <li data-md="">
       <p>Let <var>document</var> be the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#xmldocument">XMLDocument</a></code> object on which the method was
invoked.</p>
      </li><li data-md="">
       <p><a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-6">Parse</a> <var>url</var>, relative to the <a data-link-type="dfn" href="webappapis.html#entry-settings-object" id="ref-for-entry-settings-object-1">entry settings object</a>. If this is not
successful, throw a "<code class="idl"><a data-link-type="idl" href="http://www.ecma-international.org/ecma-262/6.0/#sec-native-error-types-used-in-this-standard-syntaxerror">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> and abort these steps.
Otherwise, let <var>urlRecord</var> be the <a data-link-type="dfn" href="infrastructure.html#resulting-url-record" id="ref-for-resulting-url-record-3">resulting URL record</a>.</p>
      </li><li data-md="">
       <p>If <var>urlRecord</var>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-origin">origin</a> is not the same as the <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-5">origin</a> of <var>document</var>, throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror">SecurityError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> and abort these steps.</p>
      </li><li data-md="">
       <p>Remove all child nodes of <var>document</var>, without firing any mutation events.</p>
      </li><li data-md="">
       <p>Set the <a data-link-type="dfn" href="dom.html#current-document-readiness" id="ref-for-current-document-readiness-4">current document readiness</a> of <var>document</var> to "<code>loading</code>".</p>
      </li><li data-md="">
       <p>Run the remainder of these steps <a data-link-type="dfn" href="infrastructure.html#in-parallel" id="ref-for-in-parallel-3">in parallel</a>, and return true from the method.</p>
      </li><li data-md="">
       <p>Let <var>result</var> be a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object.</p>
      </li><li data-md="">
       <p>Let <var>success</var> be false.</p>
      </li><li data-md="">
       <p>Let <var>request</var> be a new <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request">request</a> whose <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-url">URL</a> is <var>urlRecord</var>, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-client">client</a> is <a data-link-type="dfn" href="webappapis.html#entry-settings-object" id="ref-for-entry-settings-object-2">entry settings object</a>, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-destination">destination</a> is
"<code>subresource</code>", <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#synchronous-flag">synchronous flag</a> is set, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-mode">mode</a> is
"<code>same-origin</code>", <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-credentials-mode">credentials mode</a> is "<code>same-origin</code>", and whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag">use-URL-credentials flag</a> is set.</p>
      </li><li data-md="">
       <p>Let <var>response</var> be the result of <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch">fetching</a> <var>request</var>.</p>
      </li><li data-md="">
       <p>If <var>response</var>’s <a data-link-type="dfn" href="infrastructure.html#content-type-metadata" id="ref-for-content-type-metadata-1">Content-Type metadata</a> is an <a data-link-type="dfn" href="infrastructure.html#xml-mime-type" id="ref-for-xml-mime-type-4">XML MIME type</a>, then run
these substeps:</p>
       <ol>
        <li data-md="">
         <p>Create a new <a data-link-type="dfn" href="xhtml.html#xml-parser" id="ref-for-xml-parser-3">XML parser</a> associated with the <var>result</var> document.</p>
        </li><li data-md="">
         <p>Pass this parser <var>response</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-body">body</a>.</p>
        </li><li data-md="">
         <p>If there is an XML well-formedness or XML namespace well-formedness error, then remove
all child nodes from <var>result</var>. Otherwise let <var>success</var> be true.</p>
       </li></ol>
      </li><li data-md="">
       <p>Queue a task to run the following steps.</p>
       <ol>
        <li data-md="">
         <p>Set the <a data-link-type="dfn" href="dom.html#current-document-readiness" id="ref-for-current-document-readiness-5">current document readiness</a> of <var>document</var> to
"<code>complete</code>".</p>
        </li><li data-md="">
         <p>Replace all the children of <var>document</var> by the children of <var>result</var> (even if it has no children), firing mutation events as if a <code>DocumentFragment</code> containing the new children had been inserted.</p>
        </li><li data-md="">
         <p><a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-2">Fire a simple event</a> named <code>load</code> at <var>document</var>.</p>
       </li></ol>
     </li></ol>
    </div>
    <h3 class="heading settled" data-level="3.2" id="elements"><span class="secno">3.2. </span><span class="content">Elements</span><a class="self-link" href="dom.html#elements"></a></h3>
    <h4 class="heading settled" data-level="3.2.1" id="elements-semantics"><span class="secno">3.2.1. </span><span class="content">Semantics</span><a class="self-link" href="dom.html#elements-semantics"></a></h4>
    <p>Elements, attributes, and attribute values in HTML are defined (by this specification) to have
  certain meanings (semantics). For example, the <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-1">ol</a></code> element represents an ordered list,
  and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-2">lang</a></code> attribute represents the language of the content.</p>
    <p>These definitions allow HTML processors, like web browsers and search engines, to present
  documents and applications consistently in different contexts.</p>
    <div class="example" id="example-1fbda7df">
     <a class="self-link" href="dom.html#example-1fbda7df"></a> In this example the HTML headings may be presented as large text in a desktop browser, or standard
  size text in bold in a mobile browser. In both cases the semantic information remains the same -
  that the <code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-4">h1</a></code> and <code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-2">h2</a></code> elements represent headings. 
<pre class="highlight"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Favorite books<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
      <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;header&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"logo.png"</span> <span class="na">alt=</span><span class="s">"Favorite books logo"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/header&gt;</span>
    <span class="nt">&lt;main&gt;</span>
      <span class="nt">&lt;h1&gt;</span>Favorite books<span class="nt">&lt;/h1&gt;</span>
      <span class="nt">&lt;p&gt;</span>These are a few of my favorite books.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;h2&gt;</span>The Belgariad<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>Five books by David and Leigh Eddings.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;h2&gt;</span>The Hitchhiker’s Guide to the Galaxy<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;p&gt;</span>A trilogy of five books by Douglas Adams.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/main&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
    </div>
    <p>This semantic information is critical to assistive technologies. For example, a screen reader will
  query the browser for semantic information and use that information to present the document or
  application in synthetic speech.</p>
    <p>In some cases assistive technologies use semantic information to provide additional functionality.
  A speech recognition tool might provide a voice command for moving focus to the start of the <code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-1">main</a></code> element for example.</p>
    <p>When the appropriate HTML element or attribute is not used, it deprives HTML processors of
  valuable semantic information.</p>
    <div class="example" id="example-72458741">
     <a class="self-link" href="dom.html#example-72458741"></a> In this example styling may be used to create a visual representation of headings and other
  components, but because the appropriate HTML elements have not been used there is little semantic
  information available to web browsers, search engines and assistive technologies. 
<pre class="highlight"><span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Favorite books<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
        <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"header"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"logo.png"</span> <span class="na">alt=</span><span class="s">"Favorite books logo"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"main"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"largeHeading"</span><span class="nt">&gt;</span>Favorite books<span class="nt">&lt;/span&gt;</span>
       <span class="nt">&lt;p&gt;</span>These are a few of my favorite books.<span class="nt">&lt;/p&gt;</span>
       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"smallHeading"</span><span class="nt">&gt;</span>The Belgariad<span class="nt">&lt;/span&gt;</span>
       <span class="nt">&lt;p&gt;</span>Five books by David and Leigh Eddings.<span class="nt">&lt;/p&gt;</span>
       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"smallHeading"</span><span class="nt">&gt;</span>The Hitchhiker’s Guide to the Galaxy<span class="nt">&lt;/span&gt;</span>
       <span class="nt">&lt;p&gt;</span>A trilogy of five books by Douglas Adams.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
    </div>
    <p>A document can change dynamically while it is being processed. Scripting and other mechanisms can
  be used to change attribute values, text, or the entire document structure. The semantics of a
  document are therefore based on the document’s state at a particular instance in time, but may
  also change in response to external events. User agents must update their presentation of the
  document to reflect these changes.</p>
    <div class="example" id="example-f5fd0d73">
     <a class="self-link" href="dom.html#example-f5fd0d73"></a> In this example the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-1">audio</a></code> element is used to play a music track. The <dfn class="idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export="" id="dom-document-controls"><code>controls</code><a class="self-link" href="dom.html#dom-document-controls"></a></dfn> attribute is used to show the user
  agent player, and as the music plays the controls are updated to indicate progress. The available
  semantic information is updated in response to these changes. 
<pre class="highlight"><span class="nt">&lt;audio</span> <span class="na">src=</span><span class="s">"comfortablynumb.mp3"</span> <span class="na">controls</span><span class="nt">&gt;</span>
</pre>
    </div>
    <h4 class="heading settled" data-level="3.2.2" id="elements-in-the-dom"><span class="secno">3.2.2. </span><span class="content">Elements in the DOM</span><a class="self-link" href="dom.html#elements-in-the-dom"></a></h4>
    <p>The nodes representing <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-2">html elements</a> in the DOM <span class="impl">must</span> implement,
  and expose to scripts, the interfaces listed for them in the relevant sections of this
  specification. This includes <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-3">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-4">XML documents</a>, even when those
  documents are in another context (e.g., inside an XSLT transform).</p>
    <p>Elements in the DOM <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="represent">represent</dfn> things; that is, they have intrinsic <em>meaning</em>,
  also known as semantics.</p>
    <p class="example" id="example-02d2f6b1"><a class="self-link" href="dom.html#example-02d2f6b1"></a>For example, an <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-2">ol</a></code> element represents an ordered list.</p>
    <p>The basic interface, from which all the <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-4">html elements</a>' interfaces inherit, <span class="impl">and which must be used by elements that have no additional requirements,</span> is the <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-5">HTMLElement</a></code> interface.</p>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="interface" data-export="" id="htmlelement-htmlelement">HTMLElement</dfn> : <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#interface-element">Element</a> {
  // metadata attributes
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-htmlelement-title">title<a class="self-link" href="dom.html#dom-htmlelement-title"></a></dfn>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-htmlelement-lang">lang<a class="self-link" href="dom.html#dom-htmlelement-lang"></a></dfn>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="boolean" id="dom-htmlelement-translate">translate<a class="self-link" href="dom.html#dom-htmlelement-translate"></a></dfn>;
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="DOMString" id="dom-htmlelement-dir">dir<a class="self-link" href="dom.html#dom-htmlelement-dir"></a></dfn>;
  [<a class="nv idl-code" data-link-type="extended-attribute">SameObject</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="infrastructure.html#domstringmap-domstringmap" id="ref-for-domstringmap-domstringmap-2">DOMStringMap</a> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-readonly="" data-type="DOMStringMap" id="dom-htmlelement-dataset">dataset</dfn>;

  // user interaction
  <span class="kt">attribute</span> <span class="kt">boolean</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="boolean" id="dom-htmlelement-hidden">hidden<a class="self-link" href="dom.html#dom-htmlelement-hidden"></a></dfn>;
  <span class="kt">void</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="method" data-export="" data-lt="click()" id="dom-htmlelement-click">click</dfn>();
  <span class="kt">attribute</span> <span class="kt">long</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="long" id="dom-htmlelement-tabindex">tabIndex</dfn>;
  <span class="kt">void</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="method" data-export="" data-lt="focus()" id="dom-htmlelement-focus">focus<a class="self-link" href="dom.html#dom-htmlelement-focus"></a></dfn>();
  <span class="kt">void</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="method" data-export="" data-lt="blur()" id="dom-htmlelement-blur">blur<a class="self-link" href="dom.html#dom-htmlelement-blur"></a></dfn>();
  <span class="kt">attribute</span> <span class="kt">DOMString</span> <a class="nv idl-code" data-link-type="attribute" data-type="DOMString" href="editing.html#dom-htmlelement-accesskey" id="ref-for-dom-htmlelement-accesskey-1">accessKey</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <a class="nv idl-code" data-link-type="attribute" data-type="boolean" href="editing.html#dom-htmlelement-draggable" id="ref-for-dom-htmlelement-draggable-1">draggable</a>;
  [<a class="nv idl-code" data-link-type="extended-attribute">PutForwards</a>=<a class="n idl-code" data-link-type="attribute" href="https://dom.spec.whatwg.org/#dom-domtokenlist-value">value</a>] <span class="kt">readonly</span> <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="https://www.w3.org/TR/dom/#domtokenlist">DOMTokenList</a> <a class="nv idl-code" data-link-type="attribute" data-readonly="" data-type="DOMTokenList" href="editing.html#dom-htmlelement-dropzone" id="ref-for-dom-htmlelement-dropzone-1">dropzone</a>;
  <span class="kt">attribute</span> <a class="n" data-link-type="idl-name" href="interactive-elements.html#htmlmenuelement-htmlmenuelement" id="ref-for-htmlmenuelement-htmlmenuelement-1">HTMLMenuElement</a>? <a class="nv idl-code" data-link-type="attribute" data-type="HTMLMenuElement?" href="interactive-elements.html#dom-htmlelement-contextmenu" id="ref-for-dom-htmlelement-contextmenu-1">contextMenu</a>;
  <span class="kt">attribute</span> <span class="kt">boolean</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export="" data-type="boolean" id="dom-htmlelement-spellcheck">spellcheck</dfn>;
  <span class="kt">void</span> <dfn class="nv idl-code" data-dfn-for="HTMLElement" data-dfn-type="method" data-export="" data-lt="forceSpellCheck()" id="dom-htmlelement-forcespellcheck">forceSpellCheck<a class="self-link" href="dom.html#dom-htmlelement-forcespellcheck"></a></dfn>();
};
<a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-6">HTMLElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="webappapis.html#globaleventhandlers-globaleventhandlers" id="ref-for-globaleventhandlers-globaleventhandlers-2">GlobalEventHandlers</a>;
<a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-7">HTMLElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="webappapis.html#documentandelementeventhandlers-documentandelementeventhandlers" id="ref-for-documentandelementeventhandlers-documentandelementeventhandlers-2">DocumentAndElementEventHandlers</a>;
<a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-8">HTMLElement</a> <span class="kt">implements</span> <a class="n" data-link-type="idl-name" href="editing.html#elementcontenteditable-elementcontenteditable" id="ref-for-elementcontenteditable-elementcontenteditable-1">ElementContentEditable</a>;
</pre>
<pre class="idl highlight def" data-highlight="webidl"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-for="HTMLUnknownElement" data-dfn-type="interface" data-export="" id="htmlunknownelement-htmlunknownelement">HTMLUnknownElement</dfn> : <a class="n" data-link-type="idl-name" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-9">HTMLElement</a> { };
</pre>
    <p>The <code class="idl"><a data-link-type="idl" href="dom.html#htmlelement-htmlelement" id="ref-for-htmlelement-htmlelement-10">HTMLElement</a></code> interface holds methods and attributes related to a number of
  disparate features, and the members of this interface are therefore described in various different
  sections of this specification.</p>
    <div class="impl"> The <code class="idl"><a data-link-type="idl" href="dom.html#htmlunknownelement-htmlunknownelement" id="ref-for-htmlunknownelement-htmlunknownelement-1">HTMLUnknownElement</a></code> interface must be used for <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-5">html elements</a> that are not
    defined by this specification (or <a data-link-type="dfn" href="infrastructure.html#applicable-specification" id="ref-for-applicable-specification-2">other applicable specifications</a>). </div>
    <h4 class="heading settled" data-level="3.2.3" id="element-definitions"><span class="secno">3.2.3. </span><span class="content">Element definitions</span><a class="self-link" href="dom.html#element-definitions"></a></h4>
    <p>Each element in this specification has a definition that includes the following information:</p>
    <dl>
     <dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="categories">Categories</dfn></p>
     </dt><dd data-md="">
      <p>A list of <a data-link-type="dfn" href="dom.html#categories" id="ref-for-categories-1">categories</a> to which the element belongs. These are used when defining the <a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-1">content models</a> for each element.</p>
     </dd><dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="contexts-in-which-this-element-can-be-used">Contexts in which this element can be used</dfn></p>
     </dt><dd data-md="">
      <p>A <em>non-normative</em> description of where the element can be used. This information is
  redundant with the content models of elements that allow this one as a child, and is provided
  only as a convenience.</p>
      <p class="note" role="note"> For simplicity, only the most specific expectations are listed. For example, an element that
    is both <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-1">flow content</a> and <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-2">phrasing content</a> can be used anywhere that either <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-2">flow content</a> or <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-3">phrasing content</a> is expected, but since anywhere that <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-3">flow content</a> is expected, <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-4">phrasing content</a> is also expected (since all <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-5">phrasing content</a> is <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-4">flow content</a>), only "where <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-6">phrasing content</a> is
    expected" will be listed. </p>
     </dd><dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="content-model">Content model</dfn></p>
     </dt><dd data-md="">
      <p>A normative description of what content must be included as children and descendants of the
  element.</p>
     </dd><dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="tag-omission-in-text-html">Tag omission in text/html</dfn></p>
     </dt><dd data-md="">
      <p>A <em>non-normative</em> description of whether, in the <a href="iana.html#text-html"><code>text/html</code></a> syntax, the <a data-link-type="dfn" href="syntax.html#start-tag" id="ref-for-start-tag-2">start</a> and <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-2">end</a> tags can be omitted. This information is redundant with the
  normative requirements given in the <a data-link-type="dfn" href="syntax.html#optional-start-and-end-tags" id="ref-for-optional-start-and-end-tags-2">optional tags</a> section, and is provided in the
  element definitions only as a convenience.</p>
     </dd><dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="content attribute|content attributes" data-noexport="" id="content-attribute">Content attributes</dfn></p>
     </dt><dd data-md="">
      <p>A normative list of attributes that may be specified on the element (except where otherwise
  disallowed), along with non-normative descriptions of those attributes. (The content to the
  left of the dash is normative, the content to the right of the dash is not.)</p>
     </dd><dt data-md="">
      <p>Allowed <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values</p>
     </dt><dd data-md="">
      <p>A normative list of <a href="dom.html#aria-role-attribute">ARIA role attribute</a> values that may be specified on the element
  (except where otherwise disallowed). Each value is linked to a non normative description.</p>
     </dd><dt data-md="">
      <p>Allowed <a href="dom.html#state-and-property-attributes">ARIA state and property attributes</a></p>
     </dt><dd data-md="">
      <p>Links to the <a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-1">Global aria-* attributes</a> list and the <a href="dom.html#allowed-aria-roles-states-and-properties">allowed roles, states and properties</a> table.</p>
     </dd><dt data-md="">
      <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="dom-interface">DOM interface</dfn></p>
     </dt><dd data-md="">
      <p>A normative definition of a DOM interface that such elements must implement.</p>
    </dd></dl>
    <p>This is then followed by a description of what the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-1">represents</a>, along with any
  additional normative conformance criteria that may apply to authors <span class="impl"> and implementations</span>. Examples are sometimes also included.</p>
    <h5 class="heading settled" data-level="3.2.3.1" id="element-definitions-attributes"><span class="secno">3.2.3.1. </span><span class="content">Attributes</span><a class="self-link" href="dom.html#element-definitions-attributes"></a></h5>
    <p>Except where otherwise specified, attributes on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-6">html elements</a> may have any string value,
  including the empty string. Except where explicitly stated, there is no restriction on what text
  can be specified in such attributes.</p>
    <h4 class="heading settled" data-level="3.2.4" id="content-models"><span class="secno">3.2.4. </span><span class="content">Content models</span><a class="self-link" href="dom.html#content-models"></a></h4>
    <p>Each element defined in this specification has a content model: a description of the element’s
  expected <a data-link-type="dfn" href="dom.html#html-contents" id="ref-for-html-contents-1">contents</a>. An <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-7">HTML element</a> must have contents that match the requirements
  described in the element’s content model. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="html-contents" data-noexport="" id="html-contents">contents</dfn> of an element are its children
  in the DOM, except for <code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-1">template</a></code> elements, where the children are those in the <a data-link-type="dfn" href="semantics-scripting.html#template-contents" id="ref-for-template-contents-1">template contents</a> (a separate <code>DocumentFragment</code> assigned to the element when
  the element is created).</p>
    <p>The <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-26">space characters</a> are always allowed between elements. User agents represent these
  characters between elements in the source markup as <code>Text</code> nodes in the DOM. Empty <code>Text</code> nodes and <code>Text</code> nodes consisting of just sequences of those
  characters are considered <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="inter-element-whitespace">inter-element whitespace</dfn>.</p>
    <p><a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-1">Inter-element whitespace</a>, comment nodes, and processing instruction nodes must be ignored
  when establishing whether an element’s contents match the element’s content model or not, and must
  be ignored when following algorithms that define document and element semantics.</p>
    <p class="note" role="note"> Thus, an element <var>A</var> is said to be <i>preceded or followed</i> by a second element <var>B</var> if <var>A</var> and <var>B</var> have the same parent node and there are no other
    element nodes or <code>Text</code> nodes (other than <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-2">inter-element whitespace</a>) between
    them. Similarly, a node is the <i>only child</i> of an element if that element contains no other
    nodes other than <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-3">inter-element whitespace</a>, comment nodes, and processing instruction
    nodes. </p>
    <p>Authors must not use <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-8">html elements</a> anywhere except where they are explicitly allowed, as
  defined for each element, or as explicitly required by other specifications. For XML compound
  documents, these contexts could be inside elements from other namespaces, if those elements are
  defined as providing the relevant contexts.</p>
    <div class="example" id="example-488c372d"><a class="self-link" href="dom.html#example-488c372d"></a> For example, the Atom specification defines a <code>content</code> element. When its <code>type</code> attribute has the value <code>xhtml</code>, the Atom specification requires
    that it contain a single HTML <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-6">div</a></code> element. Thus, a <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-7">div</a></code> element is
    allowed in that context, even though this is not explicitly normatively stated by this
    specification. <a data-link-type="biblio" href="references.html#biblio-rfc4287">[RFC4287]</a> </div>
    <p>In addition, <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-9">html elements</a> may be orphan nodes (i.e., without a parent node).</p>
    <div class="example" id="example-c199c1b8">
     <a class="self-link" href="dom.html#example-c199c1b8"></a> For example, creating a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-1">td</a></code> element and storing it in a global variable in a
    script is conforming, even though <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-2">td</a></code> elements are otherwise only supposed to be
    used inside <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-1">tr</a></code> elements. 
<pre class="highlight"><span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">name</span><span class="o">:</span> <span class="s2">"Banana"</span><span class="p">,</span>
  <span class="nx">cell</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'td'</span><span class="p">),</span>
<span class="p">};</span>
</pre>
    </div>
    <h5 class="heading settled" data-level="3.2.4.1" id="the-nothing-content-model"><span class="secno">3.2.4.1. </span><span class="content">The "nothing" content model</span><a class="self-link" href="dom.html#the-nothing-content-model"></a></h5>
    <p>When an element’s content model is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="nothing">nothing</dfn>, the element must contain no <code>Text</code> nodes (other than <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-4">inter-element whitespace</a>) and no element nodes.</p>
    <p class="note" role="note"> Most HTML elements whose content model is "nothing" are also, for convenience, <a data-link-type="dfn" href="syntax.html#void-elements" id="ref-for-void-elements-1">void elements</a> (elements that have no <a data-link-type="dfn" href="syntax.html#end-tag" id="ref-for-end-tag-3">end tag</a> in the <a href="syntax.html#syntax">HTML syntax</a>). However,
    these are entirely separate concepts. </p>
    <h5 class="heading settled" data-level="3.2.4.2" id="kinds-of-content"><span class="secno">3.2.4.2. </span><span class="content">Kinds of content</span><a class="self-link" href="dom.html#kinds-of-content"></a></h5>
    <p>Each element in HTML falls into zero or more <dfn data-dfn-type="dfn" data-lt="content categories|conent category" data-noexport="" id="content-categories">categories<a class="self-link" href="dom.html#content-categories"></a></dfn> that group elements with
  similar characteristics together. The following broad categories are used in this specification:</p>
    <ul class="brief category-list">
     <li><a href="dom.html#kinds-of-content-metadata-content">§3.2.4.2.1 Metadata content</a>
     </li><li><a href="dom.html#kinds-of-content-flow-content">§3.2.4.2.2 Flow content</a>
     </li><li><a href="dom.html#kinds-of-content-sectioning-content">§3.2.4.2.3 Sectioning content</a>
     </li><li><a href="dom.html#kinds-of-content-heading-content">§3.2.4.2.4 Heading content</a>
     </li><li><a href="dom.html#kinds-of-content-phrasing-content">§3.2.4.2.5 Phrasing content</a>
     </li><li><a href="dom.html#kinds-of-content-embedded-content">§3.2.4.2.6 Embedded content</a>
     </li><li><a href="dom.html#kinds-of-content-interactive-content">§3.2.4.2.7 Interactive content</a>
    </li></ul>
    <p class="note" role="note"> Some elements also fall into other categories, which are defined in other parts of this
    specification. </p>
    <p>These categories are related as follows:</p>
    <object data="images/content-venn.svg" height="288" width="1000"><img alt="" height="288" src="images/content-venn.png" width="512"></object>
    <p>Sectioning content, heading content, phrasing content, embedded content, and interactive content
  are all types of flow content. Metadata is sometimes flow content. Metadata and interactive
  content are sometimes phrasing content. Embedded content is also a type of phrasing content, and
  sometimes is interactive content.</p>
    <p>Other categories are also used for specific purposes, e.g., form controls are specified using a
  number of categories to define common requirements. Some elements have unique requirements and do
  not fit into any particular category.</p>
    <h6 class="heading settled" data-level="3.2.4.2.1" id="kinds-of-content-metadata-content"><span class="secno">3.2.4.2.1. </span><span class="content">Metadata content</span><a class="self-link" href="dom.html#kinds-of-content-metadata-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="metadata content" data-noexport="" id="metadata-content">Metadata content</dfn> is content that sets up the presentation or behavior of the rest of
  the content, or that sets up the relationship of the document with other documents, or that
  conveys other "out of band" information.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="document-metadata.html#elementdef-base" id="ref-for-elementdef-base-4">base</a></code>
     </li><li><code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-1">link</a></code>
     </li><li><code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-6">meta</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-2">noscript</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-12">script</a></code>
     </li><li><code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-3">style</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-2">template</a></code>
     </li><li><a data-link-type="element" href="document-metadata.html#elementdef-title" id="ref-for-elementdef-title-11"><code>title</code></a>
    </li></ul>
    <p>Elements from other namespaces whose semantics are primarily metadata-related (e.g., RDF) are also <a data-link-type="dfn" href="dom.html#metadata-content" id="ref-for-metadata-content-1">metadata content</a>.</p>
    <div class="example" id="example-2959ab8d">
     <a class="self-link" href="dom.html#example-2959ab8d"></a> Thus, in the XML serialization, one can use RDF, like this: 
<pre class="highlight"><span class="nt">&lt;html</span> <span class="na">xmlns=</span><span class="s">"https://www.w3.org/1999/xhtml"</span> <span class="na">xmlns:r=</span><span class="s">"https://www.w3.org/1999/02/22-rdf-syntax-ns#"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>Hedral’s Home Page<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;r:RDF&gt;</span>
      <span class="nt">&lt;Person</span> <span class="na">xmlns=</span><span class="s">"https://www.w3.org/2000/10/swap/pim/contact#"</span>
                 <span class="na">r:about=</span><span class="s">"https://hedral.example.com/#"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;fullName&gt;</span>Cat Hedral<span class="nt">&lt;/fullName&gt;</span>
        <span class="nt">&lt;mailbox</span> <span class="na">r:resource=</span><span class="s">"mailto:hedral@damowmow.com"</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;personalTitle&gt;</span>Sir<span class="nt">&lt;/personalTitle&gt;</span>
      <span class="nt">&lt;/Person&gt;</span>
    <span class="nt">&lt;/r:RDF&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>My home page<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;p&gt;</span>I like playing with string, I guess. Sister says squirrels are fun
    too so sometimes I follow her to play with them.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
     <p>This isn’t possible in the HTML serialization, however.</p>
    </div>
    <h6 class="heading settled" data-level="3.2.4.2.2" id="kinds-of-content-flow-content"><span class="secno">3.2.4.2.2. </span><span class="content">Flow content</span><a class="self-link" href="dom.html#kinds-of-content-flow-content"></a></h6>
    <p>Most elements that are used in the body of documents and applications are categorized as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="flow-content">flow content</dfn>.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-7">a</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-1">abbr</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-3">address</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-4">area</a></code> (if it is a descendant of a <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-3">map</a></code> element)
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-1">article</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-1">aside</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-2">audio</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-3">b</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-1">bdi</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-1">bdo</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-4">blockquote</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-1">br</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-7">button</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-1">canvas</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-1">cite</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-1">code</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-1">data</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-datalist" id="ref-for-elementdef-datalist-1">datalist</a></code>
     </li><li><code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-2">del</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-1">details</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-1">dfn</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-dialog" id="ref-for-elementdef-dialog-2">dialog</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-8">div</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-1">dl</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-1">em</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-7">embed</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-1">fieldset</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-1">figure</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-1">footer</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-10">form</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-5">h1</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-3">h2</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h3" id="ref-for-elementdef-h3-1">h3</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h4" id="ref-for-elementdef-h4-1">h4</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h5" id="ref-for-elementdef-h5-1">h5</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-1">h6</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-1">header</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-3">hr</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-14">i</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-9">iframe</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-12">img</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-6">input</a></code>
     </li><li><code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-2">ins</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-2">kbd</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-1">keygen</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-1">label</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-2">main</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-4">map</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-1">mark</a></code>
     </li><li><code><a data-link-type="element" href="https://www.w3.org/TR/MathML/chapter2.html#interf.toplevel">math</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-1">menu</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-1">meter</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-1">nav</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-3">noscript</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-8">object</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-3">ol</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-output" id="ref-for-elementdef-output-2">output</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-8">p</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-picture" id="ref-for-elementdef-picture-1">picture</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-1">pre</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-1">progress</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-2">q</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-1">ruby</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-2">s</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-1">samp</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-13">script</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-2">section</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-11">select</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-2">small</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-6">span</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-1">strong</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-1">sub</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-1">sup</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-3">svg</a></code>
     </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-2">table</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-3">template</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-4">textarea</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-2">time</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-2">u</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-3">ul</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-1">var</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-1">video</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-1">wbr</a></code>
     </li><li><a data-link-type="dfn" href="dom.html#text" id="ref-for-text-1">Text</a>
    </li></ul>
    <h6 class="heading settled" data-level="3.2.4.2.3" id="kinds-of-content-sectioning-content"><span class="secno">3.2.4.2.3. </span><span class="content">Sectioning content</span><a class="self-link" href="dom.html#kinds-of-content-sectioning-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="sectioning content" data-noexport="" id="sectioning-content">Sectioning content</dfn> is content that defines the scope of <a data-link-type="dfn" href="dom.html#heading-content" id="ref-for-heading-content-1">headings</a> and <a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-2">footers</a>.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-2">article</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-2">aside</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-2">nav</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-3">section</a></code>
    </li></ul>
    <p>Each <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-1">sectioning content</a> element potentially has a heading and an <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-2">outline</a>. See the
  section on <a href="sections.html#headings-and-sections">§4.3.10 Headings and sections</a> for further details.</p>
    <p class="note" role="note"> There are also certain elements that are <a data-link-type="dfn" href="sections.html#sectioning-roots" id="ref-for-sectioning-roots-1">sectioning roots</a>. These are distinct from <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-2">sectioning content</a>, but they can also have an <a data-link-type="dfn" href="sections.html#outline" id="ref-for-outline-3">outline</a>. </p>
    <h6 class="heading settled" data-level="3.2.4.2.4" id="kinds-of-content-heading-content"><span class="secno">3.2.4.2.4. </span><span class="content">Heading content</span><a class="self-link" href="dom.html#kinds-of-content-heading-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="heading content|headings" data-noexport="" id="heading-content">Heading content</dfn> defines the header of a section (whether explicitly marked up using <a data-link-type="dfn" href="dom.html#sectioning-content" id="ref-for-sectioning-content-3">sectioning content</a> elements, or implied by the heading content itself).</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-6">h1</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-4">h2</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h3" id="ref-for-elementdef-h3-2">h3</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h4" id="ref-for-elementdef-h4-2">h4</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h5" id="ref-for-elementdef-h5-2">h5</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-2">h6</a></code>
    </li></ul>
    <h6 class="heading settled" data-level="3.2.4.2.5" id="kinds-of-content-phrasing-content"><span class="secno">3.2.4.2.5. </span><span class="content">Phrasing content</span><a class="self-link" href="dom.html#kinds-of-content-phrasing-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="phrasing content" data-noexport="" id="phrasing-content">Phrasing content</dfn> is the text of the document, as well as elements that mark up that
  text at the intra-paragraph level. Runs of <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-7">phrasing content</a> form <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-2">paragraphs</a>.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-8">a</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-2">abbr</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-5">area</a></code> (if it is a descendant of a <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-5">map</a></code> element)
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-3">audio</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-4">b</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-2">bdi</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-2">bdo</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-2">br</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-8">button</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-2">canvas</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-2">cite</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-2">code</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-2">data</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-datalist" id="ref-for-elementdef-datalist-2">datalist</a></code>
     </li><li><code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-3">del</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-2">dfn</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-2">em</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-8">embed</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-15">i</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-10">iframe</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-13">img</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-7">input</a></code>
     </li><li><code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-3">ins</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-3">kbd</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-2">keygen</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-2">label</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-6">map</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-2">mark</a></code>
     </li><li><code><a data-link-type="element" href="https://www.w3.org/TR/MathML/chapter2.html#interf.toplevel">math</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-2">meter</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-noscript" id="ref-for-elementdef-noscript-4">noscript</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-9">object</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-output" id="ref-for-elementdef-output-3">output</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-picture" id="ref-for-elementdef-picture-2">picture</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-2">progress</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-3">q</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-2">ruby</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-3">s</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-2">samp</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-14">script</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-12">select</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-3">small</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-7">span</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-2">strong</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-2">sub</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-2">sup</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-4">svg</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-4">template</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-5">textarea</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-3">time</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-3">u</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-2">var</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-2">video</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-2">wbr</a></code>
     </li><li><a data-link-type="dfn" href="dom.html#text" id="ref-for-text-2">Text</a>
    </li></ul>
    <p class="note" role="note"> Most elements that are categorized as phrasing content can only contain elements that are
    themselves categorized as phrasing content, not any flow content. </p>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="Text|Text content" data-noexport="" id="text">Text</dfn>, in the context of content models, means either nothing, or <code>Text</code> nodes. <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-3">Text</a> is sometimes used as a content model on its own, but is also <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-8">phrasing content</a>, and can be <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-5">inter-element whitespace</a> (if the <code>Text</code> nodes are empty or contain just <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-27">space characters</a>).</p>
    <p><code>Text</code> nodes and attribute values must consist of <a data-link-type="dfn" href="infrastructure.html#unicode-character" id="ref-for-unicode-character-2">Unicode characters</a>, must not
  contain U+0000 characters, must not contain permanently undefined Unicode characters
  (noncharacters), and must not contain <a data-link-type="dfn" href="infrastructure.html#control-characters" id="ref-for-control-characters-2">control characters</a> other than <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-28">space characters</a>.</p>
    <p>This specification includes extra constraints on the exact value of <code>Text</code> nodes and
  attribute values depending on their precise context.</p>
    <p>For elements in HTML, the constraints of the <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-4">Text</a> <a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-2">content model</a> also depends on the <a data-link-type="dfn" href="syntax.html#kind-of-element" id="ref-for-kind-of-element-1">kind of element</a>. For instance, an "<code>&lt;</code>" inside a <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-6">textarea</a></code> element does
  not need to be escaped in HTML because <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-7">textarea</a></code> is an <a data-link-type="dfn" href="syntax.html#escapable-raw-text" id="ref-for-escapable-raw-text-1">escapable raw text</a> element.
  (This does not apply to XHTML. In XHTML, the <a data-link-type="dfn" href="syntax.html#kind-of-element" id="ref-for-kind-of-element-2">kind of element</a> doesn’t affect the constraints
  of <a data-link-type="dfn" href="dom.html#content-model" id="ref-for-content-model-3">content model</a>: <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-5">Text</a>.)</p>
    <h6 class="heading settled" data-level="3.2.4.2.6" id="kinds-of-content-embedded-content"><span class="secno">3.2.4.2.6. </span><span class="content">Embedded content</span><a class="self-link" href="dom.html#kinds-of-content-embedded-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="embedded content" data-noexport="" id="embedded-content">Embedded content</dfn> is content that imports another
  resource into the document, or content from another vocabulary that is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-1">inserted into the document</a>.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-4">audio</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-3">canvas</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-9">embed</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-11">iframe</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-14">img</a></code>
     </li><li><code><a data-link-type="element" href="https://www.w3.org/TR/MathML/chapter2.html#interf.toplevel">math</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-10">object</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-picture" id="ref-for-elementdef-picture-3">picture</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-5">svg</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-3">video</a></code>
    </li></ul>
    <p>Elements that are from namespaces other than the <a data-link-type="dfn" href="infrastructure.html#html-namespace" id="ref-for-html-namespace-8">HTML namespace</a> and that convey content but
  not metadata, are <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-1">embedded content</a> for the purposes of the content models defined in this
  specification. (For example, MathML, or SVG.)</p>
    <p>Some embedded content elements can have <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="fallback-content">fallback content</dfn>: content that is to be used
  when the external resource cannot be used (e.g., because it is of an unsupported format). The
  element definitions state what the fallback is, if any.</p>
    <h6 class="heading settled" data-level="3.2.4.2.7" id="kinds-of-content-interactive-content"><span class="secno">3.2.4.2.7. </span><span class="content">Interactive content</span><a class="self-link" href="dom.html#kinds-of-content-interactive-content"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="interactive content" data-noexport="" id="interactive-content">Interactive content</dfn> is content that is specifically intended
  for user interaction.</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-9">a</a></code> (if the <code><a data-link-type="element-sub" href="links.html#element-attrdef-a-href" id="ref-for-element-attrdef-a-href-8">href</a></code> attribute is present)
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-5">audio</a></code> (if the <code><a data-link-type="element-sub" href="semantics-embedded-content.html#element-attrdef-mediaelements-controls" id="ref-for-element-attrdef-mediaelements-controls-1">controls</a></code> attribute is present)
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-9">button</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-2">details</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-10">embed</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-12">iframe</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-15">img</a></code> (if the <code><a data-link-type="element-sub" href="semantics-embedded-content.html#element-attrdef-img-usemap" id="ref-for-element-attrdef-img-usemap-1">usemap</a></code> attribute is present)
     </li><li> <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-8">input</a></code> (if the <code><a data-link-type="element-sub" href="sec-forms.html#element-attrdef-input-type" id="ref-for-element-attrdef-input-type-1">type</a></code> attribute is <em>not</em> in the <a data-link-type="dfn" href="editing.html#hidden" id="ref-for-hidden-1">Hidden</a> state) 
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-3">keygen</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-3">label</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-13">select</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-8">textarea</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-4">video</a></code> (if the <code><a data-link-type="element-sub" href="semantics-embedded-content.html#element-attrdef-mediaelements-controls" id="ref-for-element-attrdef-mediaelements-controls-2">controls</a></code> attribute is present)
    </li></ul>
    <p>The <code>tabindex</code> attribute can also make any element into <a data-link-type="dfn" href="dom.html#interactive-content" id="ref-for-interactive-content-2">interactive content</a>.</p>
    <h6 class="heading settled" data-level="3.2.4.2.8" id="sec-palpable-content"><span class="secno">3.2.4.2.8. </span><span class="content">Palpable content</span><a class="self-link" href="dom.html#sec-palpable-content"></a></h6>
    <p>As a general rule, elements whose content model allows any <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-5">flow content</a> or <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-9">phrasing content</a> should have at least one node in its <a data-link-type="dfn" href="dom.html#html-contents" id="ref-for-html-contents-2">contents</a> that is <a data-link-type="dfn" href="dom.html#palpable-content" id="ref-for-palpable-content-1">palpable content</a> and that does not have the <code>hidden</code> attribute specified.</p>
    <p class="note" role="note"> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="palpable content" data-noexport="" id="palpable-content">Palpable content</dfn> makes an element non-empty by providing either some descendant non-empty <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-6">text</a>, or else something users can hear (<code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-6">audio</a></code> elements) or view
    (<code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-5">video</a></code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-16">img</a></code> or <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-4">canvas</a></code> elements) or otherwise interact
    with (for example, interactive form controls). </p>
    <p>This requirement is not a hard requirement, however, as there are many cases where an element can
  be empty legitimately, for example when it is used as a placeholder which will later be filled in
  by a script, or when the element is part of a template and would on most pages be filled in but on
  some pages is not relevant.</p>
    <p>Conformance checkers are encouraged to provide a mechanism for authors to find elements that fail
  to fulfill this requirement, as an authoring aid.</p>
    <p>The following elements are palpable content:</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-10">a</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-3">abbr</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-address" id="ref-for-elementdef-address-4">address</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-article" id="ref-for-elementdef-article-3">article</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-aside" id="ref-for-elementdef-aside-3">aside</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-7">audio</a></code> (if the <code>controls</code> attribute is present)
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-b" id="ref-for-elementdef-b-5">b</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-3">bdi</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-3">bdo</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-5">blockquote</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-10">button</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-5">canvas</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-3">cite</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-code" id="ref-for-elementdef-code-3">code</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-data" id="ref-for-elementdef-data-3">data</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-3">details</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-3">dfn</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-9">div</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-2">dl</a></code> (if the element’s children include at least one name-value group)
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-em" id="ref-for-elementdef-em-3">em</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-11">embed</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-2">fieldset</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-figure" id="ref-for-elementdef-figure-2">figure</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-footer" id="ref-for-elementdef-footer-3">footer</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-form" id="ref-for-elementdef-form-11">form</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-7">h1</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-5">h2</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h3" id="ref-for-elementdef-h3-3">h3</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h4" id="ref-for-elementdef-h4-3">h4</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h5" id="ref-for-elementdef-h5-3">h5</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-3">h6</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-header" id="ref-for-elementdef-header-2">header</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-i" id="ref-for-elementdef-i-16">i</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-13">iframe</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-17">img</a></code>
     </li><li> <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-9">input</a></code> (if the <code>type</code> attribute is <em>not</em> in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-hidden" id="ref-for-element-statedef-input-hidden-1">Hidden</a> state) 
     </li><li><code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-4">ins</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-kbd" id="ref-for-elementdef-kbd-4">kbd</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-4">keygen</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-label" id="ref-for-elementdef-label-4">label</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-main" id="ref-for-elementdef-main-3">main</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-7">map</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-mark" id="ref-for-elementdef-mark-3">mark</a></code>
     </li><li><code><a data-link-type="element" href="https://www.w3.org/TR/MathML/chapter2.html#interf.toplevel">math</a></code>
     </li><li><code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-2">menu</a></code> (if the <code>type</code> attribute is in the <a data-link-type="state" href="interactive-elements.html#statedef-menu-toolbar" id="ref-for-statedef-menu-toolbar-1">toolbar</a> state)
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-3">meter</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-nav" id="ref-for-elementdef-nav-3">nav</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-11">object</a></code>
     </li><li> <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-4">ol</a></code> (if the element’s children include at least one <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-3">li</a></code> element) 
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-output" id="ref-for-elementdef-output-4">output</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-9">p</a></code>
     </li><li><code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-2">pre</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-3">progress</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-4">q</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-3">ruby</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-s" id="ref-for-elementdef-s-4">s</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-samp" id="ref-for-elementdef-samp-3">samp</a></code>
     </li><li><code><a data-link-type="element" href="sections.html#elementdef-section" id="ref-for-elementdef-section-4">section</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-14">select</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-small" id="ref-for-elementdef-small-4">small</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-8">span</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-strong" id="ref-for-elementdef-strong-3">strong</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sub" id="ref-for-elementdef-sub-3">sub</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-sup" id="ref-for-elementdef-sup-3">sup</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-6">svg</a></code>
     </li><li><code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-3">table</a></code>
     </li><li><code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-9">textarea</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-time" id="ref-for-elementdef-time-4">time</a></code>
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-u" id="ref-for-elementdef-u-4">u</a></code>
     </li><li> <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-4">ul</a></code> (if the element’s children include at least one <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-4">li</a></code> element) 
     </li><li><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-var" id="ref-for-elementdef-var-3">var</a></code>
     </li><li><code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-6">video</a></code>
     </li><li><a data-link-type="dfn" href="dom.html#text" id="ref-for-text-7">Text</a> that is not <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-6">inter-element whitespace</a>
    </li></ul>
    <h6 class="heading settled" data-level="3.2.4.2.9" id="sec-script-supporting-elements"><span class="secno">3.2.4.2.9. </span><span class="content">Script-supporting elements</span><a class="self-link" href="dom.html#sec-script-supporting-elements"></a></h6>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="Script-supporting element|Script-supporting elements" data-noexport="" id="script-supporting-element">Script-supporting elements</dfn> are those that do not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-2">represent</a> anything themselves
  (i.e., they are not rendered), but are used to support scripts, e.g., to provide functionality for
  the user.</p>
    <p>The following elements are script-supporting elements:</p>
    <ul class="brief category-list">
     <li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-15">script</a></code>
     </li><li><code><a data-link-type="element" href="semantics-scripting.html#elementdef-template" id="ref-for-elementdef-template-5">template</a></code>
    </li></ul>
    <h5 class="heading settled" data-level="3.2.4.3" id="transparent-content-models"><span class="secno">3.2.4.3. </span><span class="content">Transparent content models</span><a class="self-link" href="dom.html#transparent-content-models"></a></h5>
    <p>Some elements are described as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="transparent">transparent</dfn>; they have "transparent" in the description
  of their content model. The content model of a <a data-link-type="dfn" href="dom.html#transparent" id="ref-for-transparent-1">transparent</a> element is derived from the
  content model of its parent element: the elements required in the part of the content model that
  is "transparent" are the same elements as required in the part of the content model of the parent
  of the transparent element in which the transparent element finds itself.</p>
    <div class="example" id="example-0714f70d"><a class="self-link" href="dom.html#example-0714f70d"></a> For instance, an <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-5">ins</a></code> element inside a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-4">ruby</a></code> element cannot contain an <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-1">rt</a></code> element, because the part of the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-ruby" id="ref-for-elementdef-ruby-5">ruby</a></code> element’s content model that
    allows <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-6">ins</a></code> elements is the part that allows <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-10">phrasing content</a>, and the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-2">rt</a></code> element is not <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-11">phrasing content</a>. </div>
    <p class="note" role="note"> In some cases, where transparent elements are nested in each other, the process has to be
    applied iteratively. </p>
    <div class="example" id="example-f9e5bb8e">
     <a class="self-link" href="dom.html#example-f9e5bb8e"></a> Consider the following markup fragment: 
<pre class="highlight"><span class="nt">&lt;p&gt;&lt;object&gt;&lt;param&gt;&lt;ins&gt;&lt;map&gt;&lt;a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>Apples<span class="nt">&lt;/a&gt;&lt;/map&gt;&lt;/ins&gt;&lt;/object&gt;&lt;/p&gt;</span>
</pre>
     <p>To check whether "Apples" is allowed inside the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-11">a</a></code> element, the content models are
    examined. The <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-12">a</a></code> element’s content model is transparent, as is the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-8">map</a></code> element’s, as is the <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-7">ins</a></code> element’s, as is the part of the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-12">object</a></code> element’s in which the <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-8">ins</a></code> element is found. The <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-13">object</a></code> element is
    found in the <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-10">p</a></code> element, whose content model is <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-12">phrasing content</a>. Thus,
    "Apples" is allowed, as text is phrasing content.</p>
    </div>
    <p>When a transparent element has no parent, then the part of its content model that is "transparent"
  must instead be treated as accepting any <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-6">flow content</a>.</p>
    <h5 class="heading settled" data-level="3.2.4.4" id="paragraphs"><span class="secno">3.2.4.4. </span><span class="content">Paragraphs</span><a class="self-link" href="dom.html#paragraphs"></a></h5>
    <p class="note" role="note"> The term <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-3">paragraph</a> as defined in this section is used for more than just the definition
    of the <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-11">p</a></code> element. The <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-4">paragraph</a> concept defined here is used to describe how
    to interpret documents. The <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-12">p</a></code> element is merely one of several ways of marking up a <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-5">paragraph</a>. </p>
    <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="paragraph|paragraphs|implied paragraph|paragraphing|implied|implied paragraphs" data-noexport="" id="paragraph">paragraph</dfn> is typically a run of <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-13">phrasing content</a> that forms a block of text
  with one or more sentences that discuss a particular topic, as in typography, but can also be used
  for more general thematic grouping. For instance, an address is also a paragraph, as is a part of
  a form, a byline, or a stanza in a poem.</p>
    <div class="example" id="example-dc5ce1f8">
     <a class="self-link" href="dom.html#example-dc5ce1f8"></a> In the following example, there are two paragraphs in a section. There is also a heading,
    which contains phrasing content that is not a paragraph. Note how the comments and <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-7">inter-element whitespace</a> do not form paragraphs. 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h2&gt;</span>Example of paragraphs<span class="nt">&lt;/h2&gt;</span>
  This is the <span class="nt">&lt;em&gt;</span>first<span class="nt">&lt;/em&gt;</span> paragraph in this example.
  <span class="nt">&lt;p&gt;</span>This is the second.<span class="nt">&lt;/p&gt;</span>
  <span class="c">&lt;!-- This is not a paragraph. --&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
    </div>
    <p>Paragraphs in <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-7">flow content</a> are defined relative to what the document looks like without the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-13">a</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-9">ins</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-4">del</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-9">map</a></code> elements complicating
  matters, since those elements, with their hybrid content models, can straddle paragraph
  boundaries, as shown in the first two examples below.</p>
    <p class="note" role="note"> Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such
    markup can be difficult. </p>
    <div class="example" id="example-75594b8c">
     <a class="self-link" href="dom.html#example-75594b8c"></a> The following example takes the markup from the earlier example and puts <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-10">ins</a></code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-5">del</a></code> elements around some of the markup to show that the text was changed (though in
    this case, the changes admittedly don’t make much sense). Notice how this example has exactly
    the same paragraphs as the previous one, despite the <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-11">ins</a></code> and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-6">del</a></code> elements — the <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-12">ins</a></code> element straddles the heading and the first paragraph, and
    the <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-7">del</a></code> element straddles the boundary between the two paragraphs. 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;ins&gt;&lt;h1&gt;</span>Example of paragraphs<span class="nt">&lt;/h1&gt;</span>
  This is the <span class="nt">&lt;em&gt;</span>first<span class="nt">&lt;/em&gt;</span> paragraph in<span class="nt">&lt;/ins&gt;</span> this example<span class="nt">&lt;del&gt;</span>.
  <span class="nt">&lt;p&gt;</span>This is the second.<span class="nt">&lt;/p&gt;&lt;/del&gt;</span>
  <span class="c">&lt;!-- This is not a paragraph. --&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
    </div>
    <div class="impl">
      Let <var>view</var> be a view of the DOM that replaces all <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-14">a</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-13">ins</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-8">del</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-10">map</a></code> elements in the document with their <a data-link-type="dfn" href="dom.html#html-contents" id="ref-for-html-contents-3">contents</a>. Then, in <var>view</var>, for each run of sibling <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-14">phrasing content</a> nodes uninterrupted by other types of content, in an element that accepts content other than <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-15">phrasing content</a> as well as <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-16">phrasing content</a>, let <var>first</var> be the first
    node of the run, and let <var>last</var> be the last node of the run. For each such run that
    consists of at least one node that is neither <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-2">embedded content</a> nor <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-8">inter-element whitespace</a>, a paragraph exists in the original DOM from immediately before <var>first</var> to immediately after <var>last</var>. (Paragraphs can thus span across <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-15">a</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-14">ins</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-9">del</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-map" id="ref-for-elementdef-map-11">map</a></code> elements.) 
     <p>Conformance checkers may warn authors of cases where they have paragraphs that overlap each
    other (this can happen with <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-14">object</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-7">video</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-8">audio</a></code>, and <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-6">canvas</a></code> elements, and indirectly through elements in other namespaces that allow
    HTML to be further embedded therein, like <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-svg" id="ref-for-elementdef-svg-7">svg</a></code> or <code><a data-link-type="element" href="https://www.w3.org/TR/MathML/chapter2.html#interf.toplevel">math</a></code>).</p>
    </div>
    <p>A <a data-link-type="dfn" href="dom.html#paragraph" id="ref-for-paragraph-6">paragraph</a> is also formed explicitly by <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-13">p</a></code> elements.</p>
    <p class="note" role="note"> The <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-14">p</a></code> element can be used to wrap individual paragraphs when there would otherwise
    not be any content other than phrasing content to separate the paragraphs from each other. </p>
    <div class="example" id="example-3b27b2c4">
     <a class="self-link" href="dom.html#example-3b27b2c4"></a> In the following example, the link spans half of the first paragraph, all of the heading
    separating the two paragraphs, and half of the second paragraph. It straddles the paragraphs and
    the heading. 
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  Welcome!
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>
    This is home of...
    <span class="nt">&lt;h1&gt;</span>The Falcons!<span class="nt">&lt;/h1&gt;</span>
    The Lockheed Martin multirole jet fighter aircraft!
  <span class="nt">&lt;/a&gt;</span>
  This page discusses the F-16 Fighting Falcon’s innermost secrets.
<span class="nt">&lt;/header&gt;</span>
</pre>
     <p>Here is another way of marking this up, this time showing the paragraphs explicitly, and
    splitting the one link element into three:</p>
<pre class="highlight"><span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;p&gt;</span>Welcome! <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>This is home of...<span class="nt">&lt;/a&gt;&lt;/p&gt;</span>
  <span class="nt">&lt;h1&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>The Falcons!<span class="nt">&lt;/a&gt;&lt;/h1&gt;</span>
  <span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"about.html"</span><span class="nt">&gt;</span>The Lockheed Martin multirole jet
  fighter aircraft!<span class="nt">&lt;/a&gt;</span> This page discusses the F-16 Fighting
  Falcon’s innermost secrets.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/header&gt;</span>
</pre>
    </div>
    <div class="example" id="example-e9dece17">
     <a class="self-link" href="dom.html#example-e9dece17"></a> It is possible for paragraphs to overlap when using certain elements that define fallback
    content. For example, in the following section: 
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h2&gt;</span>My Cats<span class="nt">&lt;/h2&gt;</span>
  You can play with my cat simulator.
  <span class="nt">&lt;object</span> <span class="na">data=</span><span class="s">"cats.sim"</span><span class="nt">&gt;</span>
    To see the cat simulator, use one of the following links:
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"cats.sim"</span><span class="nt">&gt;</span>Download simulator file<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://sims.example.com/watch?v=LYds5xY4INU"</span><span class="nt">&gt;</span>Use online simulator<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
    Alternatively, upgrade to the Mellblom Browser.
  <span class="nt">&lt;/object&gt;</span>
  I’m quite proud of it.
<span class="nt">&lt;/section&gt;</span>
</pre>
     <p>There are five paragraphs:</p>
     <ol>
      <li data-md="">
       <p>The paragraph that says "You can play with my cat simulator. <i>object</i> I’m quite proud of
it.", where <i>object</i> is the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-15">object</a></code> element.</p>
      </li><li data-md="">
       <p>The paragraph that says "To see the cat simulator, use one of the following links:".</p>
      </li><li data-md="">
       <p>The paragraph that says "Download simulator file".</p>
      </li><li data-md="">
       <p>The paragraph that says "Use online simulator".</p>
      </li><li data-md="">
       <p>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</p>
     </li></ol>
     <p>The first paragraph is overlapped by the other four. A user agent that supports the "cats.sim"
    resource will only show the first one, but a user agent that shows the fallback will confusingly
    show the first sentence of the first paragraph as if it was in the same paragraph as the second
    one, and will show the last paragraph as if it was at the start of the second sentence of the
    first paragraph.</p>
     <p>To avoid this confusion, explicit <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-15">p</a></code> elements can be used. For example:</p>
<pre class="highlight"><span class="nt">&lt;section&gt;</span>
  <span class="nt">&lt;h2&gt;</span>My Cats<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>You can play with my cat simulator.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;object</span> <span class="na">data=</span><span class="s">"cats.sim"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>To see the cat simulator, use one of the following links:<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"cats.sim"</span><span class="nt">&gt;</span>Download simulator file<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"https://sims.example.com/watch?v=LYds5xY4INU"</span><span class="nt">&gt;</span>Use online simulator<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;p&gt;</span>Alternatively, upgrade to the Mellblom Browser.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/object&gt;</span>
  <span class="nt">&lt;p&gt;</span>I’m quite proud of it.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre>
    </div>
    <h4 class="heading settled" data-level="3.2.5" id="sec-global-attributes"><span class="secno">3.2.5. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="global-attributes">Global attributes</dfn></span><a class="self-link" href="dom.html#sec-global-attributes"></a></h4>
    <p>The following attributes are common to and may be specified on all <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-10">html elements</a> <span class="impl"> (even those not defined in this specification)</span>:</p>
    <ul>
     <li data-md="">
      <p><code><a data-link-type="element-sub" href="editing.html#element-attrdef-global-accesskey" id="ref-for-element-attrdef-global-accesskey-1">accesskey</a></code></p>
     </li><li data-md="">
      <p><code>class</code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="editing.html#element-attrdef-global-contenteditable" id="ref-for-element-attrdef-global-contenteditable-1">contenteditable</a></code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-global-contextmenu" id="ref-for-element-attrdef-global-contextmenu-1">contextmenu</a></code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-1">dir</a></code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="editing.html#element-attrdef-global-draggable" id="ref-for-element-attrdef-global-draggable-1">draggable</a></code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="editing.html#element-attrdef-global-dropzone" id="ref-for-element-attrdef-global-dropzone-1">dropzone</a></code></p>
     </li><li data-md="">
      <p><code>hidden</code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-id" id="ref-for-element-attrdef-global-id-4">id</a></code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-3">lang</a></code></p>
     </li><li data-md="">
      <p><code>spellcheck</code></p>
     </li><li data-md="">
      <p><code>style</code></p>
     </li><li data-md="">
      <p><code>tabindex</code></p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-title" id="ref-for-element-attrdef-global-title-1">title</a></code></p>
     </li><li data-md="">
      <p><code>translate</code></p>
    </li></ul>
    <div class="impl">
      These attributes are only defined by this specification as attributes for <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-11">HTML elements</a>. When this specification refers to elements having these attributes, elements from
  namespaces that are not defined as having these attributes must not be considered as being
  elements with these attributes. 
     <div class="example" id="example-9c68f1a6">
      <a class="self-link" href="dom.html#example-9c68f1a6"></a> For example, in the following XML fragment, the "<code>bogus</code>" element does not have a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-2">dir</a></code> attribute as defined in this specification, despite having an attribute with
    the literal name "<code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-3">dir</a></code>". Thus, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-1">the directionality</a> of the inner-most <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-9">span</a></code> element is "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-1"><code>rtl</code></a>", inherited from the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-10">div</a></code> element
    indirectly through the "<code>bogus</code>" element. 
<pre class="bad">&lt;div xmlns="https://www.w3.org/1999/xhtml" dir="rtl"&gt;
  &lt;bogus xmlns="https://example.net/ns" dir="ltr"&gt;
    &lt;span xmlns="https://www.w3.org/1999/xhtml"&gt;
    &lt;/span&gt;
  &lt;/bogus&gt;
&lt;/div&gt;
</pre>
     </div>
    </div>
    <hr>
    <p>To enable assistive technology products to expose a more fine-grained interface than is otherwise
  possible with HTML elements and attributes, a set of
  annotations for assistive technology products can be specified (the ARIA <code>role</code> and <code>aria-*</code> attributes). <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a></p>
    <hr>
    <p>The following <a data-link-type="dfn" href="webappapis.html#event-handler-content-event-handler-content-attribute" id="ref-for-event-handler-content-event-handler-content-attribute-3">event handler content attributes</a> may be specified on any <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-12">HTML element</a>:</p>
    <ul>
     <li data-md="">
      <p><code>onabort</code></p>
     </li><li data-md="">
      <p><code>onblur</code>*</p>
     </li><li data-md="">
      <p><code>oncancel</code></p>
     </li><li data-md="">
      <p><code>oncanplay</code></p>
     </li><li data-md="">
      <p><code>oncanplaythrough</code></p>
     </li><li data-md="">
      <p><code>onchange</code></p>
     </li><li data-md="">
      <p><code>onclick</code></p>
     </li><li data-md="">
      <p><code>onclose</code></p>
     </li><li data-md="">
      <p><code>oncontextmenu</code></p>
     </li><li data-md="">
      <p><code>oncopy</code></p>
     </li><li data-md="">
      <p><code>oncuechange</code></p>
     </li><li data-md="">
      <p><code>oncut</code></p>
     </li><li data-md="">
      <p><code>ondblclick</code></p>
     </li><li data-md="">
      <p><code>ondrag</code></p>
     </li><li data-md="">
      <p><code>ondragend</code></p>
     </li><li data-md="">
      <p><code>ondragenter</code></p>
     </li><li data-md="">
      <p><code>ondragexit</code></p>
     </li><li data-md="">
      <p><code>ondragleave</code></p>
     </li><li data-md="">
      <p><code>ondragover</code></p>
     </li><li data-md="">
      <p><code>ondragstart</code></p>
     </li><li data-md="">
      <p><code>ondrop</code></p>
     </li><li data-md="">
      <p><code>ondurationchange</code></p>
     </li><li data-md="">
      <p><code>onemptied</code></p>
     </li><li data-md="">
      <p><code>onended</code></p>
     </li><li data-md="">
      <p><code>onerror</code>*</p>
     </li><li data-md="">
      <p><code>onfocus</code>*</p>
     </li><li data-md="">
      <p><code>oninput</code></p>
     </li><li data-md="">
      <p><code>oninvalid</code></p>
     </li><li data-md="">
      <p><code>onkeydown</code></p>
     </li><li data-md="">
      <p><code>onkeypress</code></p>
     </li><li data-md="">
      <p><code>onkeyup</code></p>
     </li><li data-md="">
      <p><code>onload</code>*</p>
     </li><li data-md="">
      <p><code>onloadeddata</code></p>
     </li><li data-md="">
      <p><code>onloadedmetadata</code></p>
     </li><li data-md="">
      <p><code>onloadstart</code></p>
     </li><li data-md="">
      <p><code>onmousedown</code></p>
     </li><li data-md="">
      <p><code>onmouseenter</code></p>
     </li><li data-md="">
      <p><code>onmouseleave</code></p>
     </li><li data-md="">
      <p><code>onmousemove</code></p>
     </li><li data-md="">
      <p><code>onmouseout</code></p>
     </li><li data-md="">
      <p><code>onmouseover</code></p>
     </li><li data-md="">
      <p><code>onmouseup</code></p>
     </li><li data-md="">
      <p><code>onwheel</code></p>
     </li><li data-md="">
      <p><code>onpaste</code></p>
     </li><li data-md="">
      <p><code>onpause</code></p>
     </li><li data-md="">
      <p><code>onplay</code></p>
     </li><li data-md="">
      <p><code>onplaying</code></p>
     </li><li data-md="">
      <p><code>onprogress</code></p>
     </li><li data-md="">
      <p><code>onratechange</code></p>
     </li><li data-md="">
      <p><code>onreset</code></p>
     </li><li data-md="">
      <p><code>onresize</code>*</p>
     </li><li data-md="">
      <p><code>onscroll</code>*</p>
     </li><li data-md="">
      <p><code>onseeked</code></p>
     </li><li data-md="">
      <p><code>onseeking</code></p>
     </li><li data-md="">
      <p><code>onselect</code></p>
     </li><li data-md="">
      <p><code>onshow</code></p>
     </li><li data-md="">
      <p><code>onstalled</code></p>
     </li><li data-md="">
      <p><code>onsubmit</code></p>
     </li><li data-md="">
      <p><code>onsuspend</code></p>
     </li><li data-md="">
      <p><code>ontimeupdate</code></p>
     </li><li data-md="">
      <p><code>ontoggle</code></p>
     </li><li data-md="">
      <p><code>onvolumechange</code></p>
     </li><li data-md="">
      <p><code>onwaiting</code></p>
    </li></ul>
    <p class="note" role="note"> The attributes marked with an asterisk have a different meaning when specified on <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-19">body</a></code> elements as those elements expose <a data-link-type="dfn" href="webappapis.html#event-handler" id="ref-for-event-handler-1">event handlers</a> of the <code>Window</code> object with the same names. </p>
    <p class="note" role="note"> While these attributes apply to all elements, they are not useful on all elements. For example,
    only <a data-link-type="dfn" href="semantics-embedded-content.html#media-element" id="ref-for-media-element-1">media elements</a> will ever receive a <a class="idl-code" data-link-type="event" href="semantics-embedded-content.html#eventdef-media-volumechange" id="ref-for-eventdef-media-volumechange-1"><code>volumechange</code></a> event fired by the user agent. </p>
    <hr>
    <p><a data-link-type="dfn" href="dom.html#custom-data-attribute" id="ref-for-custom-data-attribute-1">Custom data attributes</a> (e.g., <code>data-foldername</code> or <code>data-msgid</code>) can
  be specified on any <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-13">HTML element</a>, to store custom data specific to the page.</p>
    <hr>
    <p>In <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-5">HTML documents</a>, elements in the <a data-link-type="dfn" href="infrastructure.html#html-namespace" id="ref-for-html-namespace-9">HTML namespace</a> may have an <code>xmlns</code> attribute specified, if, and only if, it has the exact value
  "<code>https://www.w3.org/1999/xhtml</code>". This does not apply to <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-5">XML documents</a>.</p>
    <p class="note" role="note"> In HTML, the <code>xmlns</code> attribute has absolutely no effect. It is basically a talisman.
    It is allowed merely to make migration to and from XHTML mildly easier. When parsed by an <a data-link-type="dfn" href="syntax.html#html-parser" id="ref-for-html-parser-4">HTML parser</a>, the attribute ends up in no namespace, not the
    "<code>https://www.w3.org/2000/xmlns/</code>" namespace like namespace declaration attributes in
    XML do. </p>
    <p class="note" role="note"> In XML, an <code>xmlns</code> attribute is part of the namespace declaration mechanism, and an
    element cannot actually have an <code>xmlns</code> attribute in no namespace specified. </p>
    <hr>
    <p>The XML specification also allows the use of the <code>xml:space</code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-2">XML namespace</a> on any element in an <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-6">XML document</a>. This attribute has no effect on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-14">html elements</a>, as the default behavior in HTML is to preserve whitespace. <a data-link-type="biblio" href="references.html#biblio-xml">[XML]</a></p>
    <p class="note" role="note"> There is no way to serialize the <code>xml:space</code> attribute on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-15">html elements</a> in the <a href="iana.html#text-html"><code>text/html</code></a> syntax. </p>
    <h5 class="heading settled" data-level="3.2.5.1" id="the-id-attribute"><span class="secno">3.2.5.1. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-id"><code>id</code></dfn> attribute</span><a class="self-link" href="dom.html#the-id-attribute"></a></h5>
    <p>The <code>id</code> attribute specifies its element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">unique identifier (ID)</a>. <a data-link-type="biblio" href="references.html#biblio-dom">[DOM]</a></p>
    <p>The value must be unique amongst all the <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">IDs</a> in the element’s <a data-link-type="dfn" href="infrastructure.html#home-subtree" id="ref-for-home-subtree-4">home subtree</a> and must
  contain at least one character. The value must not contain any <a data-link-type="dfn" href="infrastructure.html#space-characters" id="ref-for-space-characters-29">space characters</a>.</p>
    <p class="note" role="note"> There are no other restrictions on what form an ID can take; in particular, IDs can consist of
    just digits, start with a digit, start with an underscore, consist of just punctuation, etc. </p>
    <p class="note" role="note"> An element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-id">unique identifier</a> can be used for a variety of purposes, most notably as a
    way to link to specific parts of a document using fragment identifiers, as a way to target an
    element when scripting, and as a way to style a specific element from CSS. </p>
    <div class="impl"> Identifiers are opaque strings. Particular meanings should not be derived from the value of the <code>id</code> attribute. </div>
    <h5 class="heading settled" data-level="3.2.5.2" id="the-title-attribute"><span class="secno">3.2.5.2. </span><span class="content">The <code>title</code> attribute</span><a class="self-link" href="dom.html#the-title-attribute"></a></h5>
    <p>The <dfn class="dfn-paneled" data-dfn-for="global,figure,div,img,textarea,meter" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-title"><code>title</code></dfn> attribute <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-3">represents</a> advisory information for the
  element, such as would be appropriate for a tooltip. On a link, this could be the title or a
  description of the target resource; on an image, it could be the image credit or a description of
  the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it
  could be further information about the source; on <a data-link-type="dfn" href="dom.html#interactive-content" id="ref-for-interactive-content-3">interactive content</a>, it could be a label
  for, or instructions for, use of the element; and so forth. The value is text.</p>
    <p class="note" role="note"> Relying on the <code>title</code> attribute is currently discouraged as many user agents do not
    expose the attribute in an accessible manner as required by this specification (e.g., requiring a
    pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users
    and touch-only users, such as anyone with a modern phone or tablet). </p>
    <p>If this attribute is omitted from an element, then it implies that the <code>title</code> attribute of the nearest ancestor <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-16">HTML element</a> with a <code>title</code> attribute set is
  also relevant to this element. Setting the attribute overrides this, explicitly stating that the
  advisory information of any ancestors is not relevant to this element. Setting the attribute to
  the empty string indicates that the element has no advisory information.</p>
    <p>If the <code>title</code> attribute’s value contains U+000A LINE FEED (LF) characters, the content
  is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.</p>
    <div class="example" id="example-2c255525">
     <a class="self-link" href="dom.html#example-2c255525"></a> Caution is advised with respect to the use of newlines in <code>title</code> attributes. 
     <p>For instance, the following snippet actually defines an abbreviation’s expansion <em>with a line break in it</em>:</p>
<pre class="bad highlight"><span class="nt">&lt;p&gt;</span>My logs show that there was some interest in <span class="nt">&lt;abbr</span> <span class="na">title=</span><span class="s">"Hypertext</span>
<span class="s">Transport Protocol"</span><span class="nt">&gt;</span>HTTP<span class="nt">&lt;/abbr&gt;</span> today.<span class="nt">&lt;/p&gt;</span>
</pre>
    </div>
    <p>Some elements, such as <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-2">link</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-4">abbr</a></code>, and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-10">input</a></code>, define
  additional semantics for the <code>title</code> attribute beyond the semantics described above.</p>
    <div class="impl">
      The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="advisory-information">advisory information</dfn> of an element is the value that the following algorithm
    returns, with the algorithm being aborted once a value is returned. When the algorithm returns
    the empty string, then there is no advisory information. 
     <ol>
      <li data-md="">
       <p>If the element is a <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-3">link</a></code>, <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-4">style</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-dfn" id="ref-for-elementdef-dfn-4">dfn</a></code>, <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-abbr" id="ref-for-elementdef-abbr-5">abbr</a></code>, or <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-1">menuitem</a></code> element, then: if the element has a <code>title</code> attribute, return the value of that attribute, otherwise, return the
empty string.</p>
      </li><li data-md="">
       <p>Otherwise, if the element has a <code>title</code> attribute, then return its value.</p>
      </li><li data-md="">
       <p>Otherwise, if the element has a parent element, then return the parent element’s <a data-link-type="dfn" href="dom.html#advisory-information" id="ref-for-advisory-information-1">advisory information</a>.</p>
      </li><li data-md="">
       <p>Otherwise, return the empty string.</p>
     </li></ol>
     <p>User agents should inform the user when elements have <a data-link-type="dfn" href="dom.html#advisory-information" id="ref-for-advisory-information-2">advisory information</a>, otherwise the
    information would not be discoverable.</p>
     <hr>
     <p>The <code>title</code> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-3">reflect</a> the <code>title</code> content attribute.</p>
    </div>
    <h5 class="heading settled" data-level="3.2.5.3" id="the-lang-and-xmllang-attributes"><span class="secno">3.2.5.3. </span><span class="content"> The <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-4">lang</a></code> and <code><a data-link-type="element-sub" href="dom.html#element-attrdef-xml-lang" id="ref-for-element-attrdef-xml-lang-2">xml:lang</a></code> attributes </span><a class="self-link" href="dom.html#the-lang-and-xmllang-attributes"></a></h5>
    <p>The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-lang"><code>lang</code></dfn> attribute (in no namespace) specifies the primary language for
  the element’s contents and for any of the element’s attributes that contain text. Its value must
  be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string
  indicates that the primary language is unknown. <a data-link-type="biblio" href="references.html#biblio-bcp47">[BCP47]</a></p>
    <p>The <dfn class="dfn-paneled" data-dfn-for="xml" data-dfn-type="element-attr" data-export="" id="element-attrdef-xml-lang"><code>lang</code></dfn> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-3">XML namespace</a> is defined in XML. <a data-link-type="biblio" href="references.html#biblio-xml">[XML]</a></p>
    <p>If these attributes are omitted from an element, then the language of this element is the same as
  the language of its parent element, if any.</p>
    <p>The <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-5">lang</a></code> attribute in no namespace may be used on any <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-17">HTML element</a>.</p>
    <p>The <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-6">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-4">XML namespace</a> may be used on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-18">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-7">XML documents</a>, as well as elements in other namespaces if the
  relevant specifications allow it (in particular, MathML and SVG allow <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-7">lang</a></code> attributes in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-5">XML namespace</a> to be specified on their elements). If both the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-8">lang</a></code> attribute in no namespace and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-9">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-6">XML namespace</a> are specified on the same element, they must have exactly the same value
  when compared in an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-7">ASCII case-insensitive</a> manner.</p>
    <p>Authors must not use the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-10">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-7">XML namespace</a> on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-19">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-6">HTML documents</a>. To ease migration to and from XHTML, authors may
  specify an attribute in no namespace with no prefix and with the literal localname
  "<code><a data-link-type="element-sub" href="dom.html#element-attrdef-xml-lang" id="ref-for-element-attrdef-xml-lang-3">xml:lang</a></code>" on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-20">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-7">HTML documents</a>, but such attributes must
  only be specified if a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-11">lang</a></code> attribute in no namespace is also specified, and both
  attributes must have the same value when compared in an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-8">ASCII case-insensitive</a> manner.</p>
    <p class="note" role="note"> The attribute in no namespace with no prefix and with the literal localname
    "<code><a data-link-type="element-sub" href="dom.html#element-attrdef-xml-lang" id="ref-for-element-attrdef-xml-lang-4">xml:lang</a></code>" has no effect on language processing. </p>
    <p class="warning" id="lang-warning"> The language of <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-8">HTML documents</a> is indicated using a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-12">lang</a></code> attribute (on the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-7">HTML</a></code> element itself, to indicate the primary language of the document, and on individual elements,
  to indicate a change in language). It provides an explicit indication to user agents about the
  language of content, so an appropriate language dictionary can be used and, in the case of screen
  readers and similar assistive technologies with voice output, the content is pronounced using the
  correct voice / language library (where available). <strong>Setting of a language using the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-13">lang</a></code> attribute which does not match the language of the document or document parts will result in some
  users being unable to understand the content</strong>. </p>
    <div class="impl">
     <hr>
     <p>To determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="language">language</dfn> of a node, user agents must look at the nearest ancestor
    element (including the element itself if the node is an element) that has a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-14">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-8">XML namespace</a> set or is an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-21">HTML element</a> and has a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-15">lang</a></code> in no namespace attribute set. That attribute specifies the language
    of the node (regardless of its value).</p>
     <p>If both the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-16">lang</a></code> attribute in no namespace and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-17">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-9">XML namespace</a> are set on an element, user
    agents must use the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-18">lang</a></code> attribute in the <a data-link-type="dfn" href="infrastructure.html#xml-namespace" id="ref-for-xml-namespace-10">XML namespace</a>, and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-19">lang</a></code> attribute in no namespace must be <a data-link-type="dfn" href="infrastructure.html#ignored" id="ref-for-ignored-1">ignored</a> for the purposes of
    determining the element’s language.</p>
     <p>If neither the node nor any of the node’s ancestors, including the <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-15">root element</a>,
    have either attribute set, but there is a <a data-link-type="dfn" href="document-metadata.html#pragma-set-default-language" id="ref-for-pragma-set-default-language-1">pragma-set default language</a> set, then that
    is the language of the node. If there is no <a data-link-type="dfn" href="document-metadata.html#pragma-set-default-language" id="ref-for-pragma-set-default-language-2">pragma-set default language</a> set, then
    language information from a higher-level protocol (such as HTTP), if any, must be used as the
    final fallback language instead. In the absence of any such language information, and in cases
    where the higher-level protocol reports multiple languages, the language of the node is unknown,
    and the corresponding language tag is the empty string.</p>
     <p class="example" id="example-06c844e3"><a class="self-link" href="dom.html#example-06c844e3"></a> For example, if a document is delivered over HTTP and the <code>Content-Language</code> HTTP
      header is specified with a value "<code>en</code>", then for any element in the document
      that does not itself have a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-20">lang</a></code> attribute nor any ancestor of that element, the
      fallback language for the element will be English. If the value of the <code>Content-Language</code> header was "<code>de, fr, it</code>" then the language of the
      node is unknown. <a href="https://www.w3.org/International/questions/qa-http-and-lang">This
      article</a> provides some additional guidance on the use of HTTP headers, and <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-7">meta</a></code> elements for providing language information. </p>
     <p>If the resulting value is not a recognized language tag, then it must be treated as an unknown
    language having the given language tag, distinct from all other languages. For the purposes of
    round-tripping or communicating with other services that expect language tags, user agents
    should pass unknown language tags through unmodified, and tagged as being BCP 47 language tags,
    so that subsequent services do not interpret the data as another type of language description. <a data-link-type="biblio" href="references.html#biblio-bcp47">[BCP47]</a></p>
     <p class="example" id="example-19006632"><a class="self-link" href="dom.html#example-19006632"></a> Thus, for instance, an element with <code>lang="xyzzy"</code> would be matched by the selector <code>:lang(xyzzy)</code> (e.g., in CSS), but it would not be matched by <code>:lang(abcde)</code>, even though both are equally invalid. Similarly, if a Web browser
      and screen reader working in unison communicated about the language of the element, the
      browser would tell the screen reader that the language was "xyzzy", even if it knew it was
      invalid, just in case the screen reader actually supported a language with that tag after all.
      Even if the screen reader supported both BCP 47 and another syntax for encoding language
      names, and in that other syntax the string "xyzzy" was a way to denote the Belarusian
      language, it would be <em>incorrect</em> for the screen reader to then start treating text as
      Belarusian, because "xyzzy" is not how Belarusian is described in BCP 47 codes (BCP 47 uses
      the code "be" for Belarusian). </p>
     <p>If the resulting value is the empty string, then it must be interpreted as meaning that the
    language of the node is explicitly unknown.</p>
     <hr>
     <p>User agents may use the element’s language to determine proper processing or rendering (e.g., in
    the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user
    interfaces of form controls such as date pickers).</p>
     <hr>
     <p>The <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-21">lang</a></code> IDL attribute must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-4">reflect</a> the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-22">lang</a></code> content
    attribute in no namespace.</p>
    </div>
    <h5 class="heading settled" data-level="3.2.5.4" id="the-translate-attribute"><span class="secno">3.2.5.4. </span><span class="content">The <code>translate</code> attribute</span><a class="self-link" href="dom.html#the-translate-attribute"></a></h5>
    <p>The <dfn data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-translate"><code>translate</code><a class="self-link" href="dom.html#element-attrdef-global-translate"></a></dfn> attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-4">enumerated attribute</a> that is used to
  specify whether an element’s attribute values and the values of its <code>Text</code> node
  children are to be translated when the page is localized, or whether to leave them unchanged.</p>
    <p>The attribute’s keywords are the empty string, <code>yes</code>, and <code>no</code>. The empty
  string and the <code>yes</code> keyword map to the <i>yes</i> state. The <code>no</code> keyword
  maps to the <i>no</i> state. In addition, there is a third state, the <i>inherit</i> state, which
  is the <i>missing value default</i> (and the <i>invalid value default</i>).</p>
    <p>Each element (even non-HTML elements) has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="translation-mode">translation mode</dfn>, which is in either the <a data-link-type="dfn" href="dom.html#translate-enabled" id="ref-for-translate-enabled-1">translate-enabled</a> state or the <a data-link-type="dfn" href="dom.html#no-translate" id="ref-for-no-translate-1">no-translate</a> state. If an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-22">HTML element</a>’s <code>translate</code> attribute is in the <i>yes</i> state, then the element’s <a data-link-type="dfn" href="dom.html#translation-mode" id="ref-for-translation-mode-1">translation mode</a> is in the <a data-link-type="dfn" href="dom.html#translate-enabled" id="ref-for-translate-enabled-2">translate-enabled</a> state; otherwise, if the element’s <code>translate</code> attribute is in the <i>no</i> state, then the element’s <a data-link-type="dfn" href="dom.html#translation-mode" id="ref-for-translation-mode-2">translation mode</a> is in the <a data-link-type="dfn" href="dom.html#no-translate" id="ref-for-no-translate-2">no-translate</a> state. Otherwise, either the element’s <code>translate</code> attribute is in the <i>inherit</i> state, or the element is not an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-23">HTML element</a> and thus does not have a <code>translate</code> attribute; in either case, the
  element’s <a data-link-type="dfn" href="dom.html#translation-mode" id="ref-for-translation-mode-3">translation mode</a> is in the same state as its parent element’s, if any, or in the <a data-link-type="dfn" href="dom.html#translate-enabled" id="ref-for-translate-enabled-3">translate-enabled</a> state, if the element is a <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-16">root element</a>.</p>
    <p>When an element is in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="translate-enabled">translate-enabled</dfn> state, the element’s <a data-link-type="dfn" href="dom.html#translatable-attributes" id="ref-for-translatable-attributes-1">translatable attributes</a> and the values of its <code>Text</code> node children are to be
  translated when the page is localized.</p>
    <p>When an element is in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="no-translate">no-translate</dfn> state, the element’s attribute values and the
  values of its <code>Text</code> node children are to be left as-is when the page is localized,
  e.g., because the element contains a person’s name or a name of a computer program.</p>
    <p>The following attributes are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="translatable-attributes">translatable attributes</dfn>:</p>
    <ul>
     <li data-md="">
      <p><code>abbr</code> on <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-1">th</a></code> elements</p>
     </li><li data-md="">
      <p><code>alt</code> on <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-6">area</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-18">img</a></code>, and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-11">input</a></code> elements</p>
     </li><li data-md="">
      <p><code>content</code> on <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-8">meta</a></code> elements, if the <code>name</code> attribute specifies
a metadata name whose value is known to be translatable</p>
     </li><li data-md="">
      <p><code>download</code> on <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-a" id="ref-for-elementdef-a-16">a</a></code> and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-7">area</a></code> elements</p>
     </li><li data-md="">
      <p><code>label</code> on <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-2">menuitem</a></code>, <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-3">menu</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-3">optgroup</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-8">option</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-track" id="ref-for-elementdef-track-1">track</a></code> elements</p>
     </li><li data-md="">
      <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-lang" id="ref-for-element-attrdef-global-lang-23">lang</a></code> on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-24">html elements</a>; must be "translated" to match the language used in
the translation</p>
     </li><li data-md="">
      <p><code>placeholder</code> on <code>input</code> and <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-10">textarea</a></code> elements</p>
     </li><li data-md="">
      <p><code>srcdoc</code> on <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-14">iframe</a></code> elements; must be parsed and recursively processed</p>
     </li><li data-md="">
      <p><code>style</code> on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-25">html elements</a>; must be parsed and recursively processed (e.g., for
the values of "content" properties)</p>
     </li><li data-md="">
      <p><code>title</code> on all <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-26">html elements</a></p>
     </li><li data-md="">
      <p><code>value</code> on <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-12">input</a></code> elements with a <code><a data-link-type="element-sub" href="sec-forms.html#element-attrdef-input-type" id="ref-for-element-attrdef-input-type-2">type</a></code> attribute in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-button" id="ref-for-element-statedef-input-button-1">Button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-submit-button" id="ref-for-element-statedef-input-submit-button-1">submit button</a>, or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-reset-button" id="ref-for-element-statedef-input-reset-button-1">reset button</a> state</p>
    </li></ul>
    <div class="impl">
     <hr>
     <p>The <code>translate</code> IDL attribute must, on getting, return true if the
    element’s <a data-link-type="dfn" href="dom.html#translation-mode" id="ref-for-translation-mode-4">translation mode</a> is <a data-link-type="dfn" href="dom.html#translate-enabled" id="ref-for-translate-enabled-4">translate-enabled</a>, and false otherwise. On setting,
    it must set the content attribute’s value to "<code>yes</code>" if the new value is true, and
    set the content attribute’s value to "<code>no</code>" otherwise.</p>
    </div>
    <div class="example" id="example-88b17943">
     <a class="self-link" href="dom.html#example-88b17943"></a> In this example, everything in the document is to be translated when the page is localized,
    except the sample keyboard input and sample program output: 
<pre class="highlight"><span class="cp">&lt;!DOCTYPE HTML&gt;</span>
<span class="nt">&lt;html&gt;</span> <span class="c">&lt;!-- default on the root element is translate=yes --&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;title&gt;</span>The Bee Game<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- implied translate=yes inherited from ancestors --&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;p&gt;</span>The Bee Game is a text adventure game in English.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>When the game launches, the first thing you should do is type
      <span class="nt">&lt;kbd</span> <span class="na">translate=</span><span class="s">no</span><span class="nt">&gt;</span>eat honey<span class="nt">&lt;/kbd&gt;</span>. The game will respond with:<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;pre&gt;&lt;samp</span> <span class="na">translate=</span><span class="s">no</span><span class="nt">&gt;</span>Yum yum! That was some good honey!<span class="nt">&lt;/samp&gt;&lt;/pre&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
    </div>
    <h5 class="heading settled" data-level="3.2.5.5" id="the-xmlbase-attribute-xml-only"><span class="secno">3.2.5.5. </span><span class="content">The <dfn data-dfn-for="global" data-dfn-type="element" data-export="" id="elementdef-global-xmlbase"><code>xml:base</code><a class="self-link" href="dom.html#elementdef-global-xmlbase"></a></dfn> attribute (XML only)</span><a class="self-link" href="dom.html#the-xmlbase-attribute-xml-only"></a></h5>
    <p>The <code>xml:base</code> attribute is defined in XML Base. <a data-link-type="biblio" href="references.html#biblio-xmlbase">[XMLBASE]</a></p>
    <p>The <code>xml:base</code> attribute may be used on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-27">html elements</a> of <a data-link-type="dfn" href="infrastructure.html#xml-document" id="ref-for-xml-document-8">XML documents</a>.
  Authors must not use the <code>xml:base</code> attribute on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-28">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-9">HTML documents</a>.</p>
    <h5 class="heading settled" data-level="3.2.5.6" id="the-dir-attribute"><span class="secno">3.2.5.6. </span><span class="content">The <code>dir</code> attribute</span><a class="self-link" href="dom.html#the-dir-attribute"></a></h5>
    <p>The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-dir"><code>dir</code></dfn> attribute specifies the element’s text directionality. The attribute is an <a data-link-type="dfn" href="infrastructure.html#enumerated-attributes" id="ref-for-enumerated-attributes-5">enumerated attribute</a> with the following keywords and states:</p>
    <dl>
     <dt data-md="">
      <p>The <dfn class="dfn-paneled" data-dfn-for="global/dir" data-dfn-type="attr-value" data-export="" id="attr-valuedef-global-dir-ltr"><code>ltr</code></dfn> keyword, which maps to the <dfn class="dfn-paneled" data-dfn-for="dir" data-dfn-type="state" data-export="" id="statedef-dir-ltr">ltr</dfn> state</p>
     </dt><dd data-md="">
      <p>Indicates that the contents of the element are explicitly directionally isolated left-to-right
  text.</p>
     </dd><dt data-md="">
      <p>The <dfn class="dfn-paneled" data-dfn-for="global/dir" data-dfn-type="attr-value" data-export="" id="attr-valuedef-global-dir-rtl"><code>rtl</code></dfn> keyword, which maps to the <dfn class="dfn-paneled" data-dfn-for="dir" data-dfn-type="state" data-export="" id="statedef-dir-rtl">rtl</dfn> state</p>
     </dt><dd data-md="">
      <p>Indicates that the contents of the element are explicitly directionally isolated right-to-left
  text.</p>
     </dd><dt data-md="">
      <p>The <dfn class="dfn-paneled" data-dfn-for="global/dir" data-dfn-type="attr-value" data-export="" id="attr-valuedef-global-dir-auto"><code>auto</code></dfn> keyword, which maps to the <dfn class="dfn-paneled" data-dfn-for="dir" data-dfn-type="state" data-export="" id="statedef-dir-auto">auto</dfn> state</p>
     </dt><dd data-md="">
      <p>Indicates that the contents of the element are explicitly directionally isolated text, but that
  the direction is to be determined programmatically using the contents of the element (as
  described below).</p>
      <p class="note" role="note"> The heuristic used by this state is very crude (it just looks at the first character with a
    strong directionality, in a manner analogous to the Paragraph Level determination in the
    bidirectional algorithm). Authors are urged to only use this value as a last resort when the
    direction of the text is truly unknown and no better server-side heuristic can be applied. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a> </p>
      <p class="note" role="note"> For <code>textarea</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-3">pre</a></code> elements, the heuristic is applied on a
    per-paragraph level. </p>
    </dd></dl>
    <p>The attribute has no <i>invalid value default</i> and no <i>missing value default</i>.</p>
    <hr>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="directionality|the directionality|the element’s directionality" data-noexport="" id="directionality">The directionality</dfn> of an element (any element, not just an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-29">HTML element</a>) is
  either "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-ltr" id="ref-for-attr-valuedef-global-dir-ltr-1"><code>ltr</code></a>" or "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-2"><code>rtl</code></a>", and is determined as per the first appropriate set of
  steps from the following list:</p>
    <dl class="switch">
     <dt>If the element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-4">dir</a></code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-ltr" id="ref-for-statedef-dir-ltr-1">ltr</a> state
     </dt><dt> If the element is a <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-17">root element</a> and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-5">dir</a></code> attribute is not in a defined
      state (i.e., it is not present or has an invalid value) 
     </dt><dt> If the element is an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-13">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-telephone" id="ref-for-element-statedef-input-telephone-1">Telephone</a> state, and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-6">dir</a></code> attribute is not in a defined state (i.e., it
      is not present or has an invalid value) 
     </dt><dd><a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-2">The directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-ltr" id="ref-for-statedef-dir-ltr-2">ltr</a>".
     </dd><dt>If the element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-7">dir</a></code> attribute is in the <a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-3"><code>rtl</code></a> state
     </dt><dd><a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-3">The directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-rtl" id="ref-for-statedef-dir-rtl-1">rtl</a>".
     </dd><dt> If the element is an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-14">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-text" id="ref-for-element-statedef-input-text-1">Text</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-search" id="ref-for-element-statedef-input-search-1">Search</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-telephone" id="ref-for-element-statedef-input-telephone-2">Telephone</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-url" id="ref-for-element-statedef-input-url-1">URL</a>, or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-e-mail" id="ref-for-element-statedef-input-e-mail-1">E-mail</a> state, and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-8">dir</a></code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto" id="ref-for-statedef-dir-auto-1">auto</a> state 
     </dt><dt> If the element is a <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-11">textarea</a></code> element and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-9">dir</a></code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto" id="ref-for-statedef-dir-auto-2">auto</a> state 
     </dt><dd>
       If the element’s <a data-link-type="dfn" href="syntax.html#attribute-value" id="ref-for-attribute-value-2">value</a> contains a character of bidirectional character type AL or R,
      and there is no character of bidirectional character type L anywhere before it in the
      element’s <a data-link-type="dfn" href="syntax.html#attribute-value" id="ref-for-attribute-value-3">value</a>, then <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-4">the directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-rtl" id="ref-for-statedef-dir-rtl-2">rtl</a>". <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a> 
      <p>Otherwise, if the element’s <a data-link-type="dfn" href="syntax.html#attribute-value" id="ref-for-attribute-value-4">value</a> is not the empty string, or if the element is a <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-18">root element</a>, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-5">the directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-ltr" id="ref-for-statedef-dir-ltr-3">ltr</a>".</p>
      <p>Otherwise, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-6">the directionality</a> of the element is the same as the element’s parent
      element’s <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-7">directionality</a>.</p>
     </dd><dt>If the element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-10">dir</a></code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto" id="ref-for-statedef-dir-auto-3">auto</a> state
     </dt><dt> If the element is a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-4">bdi</a></code> element and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-11">dir</a></code> attribute is not in a
      defined state (i.e., it is not present or has an invalid value) 
     </dt><dd>
       Find the first character in <a data-link-type="dfn" href="infrastructure.html#tree-order" id="ref-for-tree-order-18">tree order</a> that matches the following criteria: 
      <ul>
       <li data-md="">
        <p>The character is from a <code>Text</code> node that is a descendant of the element whose <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-8">directionality</a> is being determined.</p>
       </li><li data-md="">
        <p>The character is of bidirectional character type L, AL, or R. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
       </li><li data-md="">
        <p>The character is not in a <code>Text</code> node that has an ancestor element that is a
descendant of the element whose <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-9">directionality</a> is being determined and that is
either:</p>
        <ul>
         <li data-md="">
          <p>A <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-5">bdi</a></code> element.</p>
         </li><li data-md="">
          <p>A <code><a data-link-type="element" href="semantics-scripting.html#elementdef-script" id="ref-for-elementdef-script-16">script</a></code> element.</p>
         </li><li data-md="">
          <p>A <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-5">style</a></code> element.</p>
         </li><li data-md="">
          <p>A <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-12">textarea</a></code> element.</p>
         </li><li data-md="">
          <p>An element with a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-12">dir</a></code> attribute in a defined state.</p>
        </li></ul>
      </li></ul>
      <p>If such a character is found and it is of bidirectional character type AL or R, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-10">the directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-rtl" id="ref-for-statedef-dir-rtl-3">rtl</a>".</p>
      <p>If such a character is found and it is of bidirectional character type L, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-11">the directionality</a> of the element is "<a data-link-type="state" href="dom.html#statedef-dir-ltr" id="ref-for-statedef-dir-ltr-4">ltr</a>".</p>
      <p>Otherwise, if the element is a <a data-link-type="dfn" href="infrastructure.html#root-element" id="ref-for-root-element-19">root element</a>, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-12">the directionality</a> of the element
      is "<a data-link-type="state" href="dom.html#statedef-dir-ltr" id="ref-for-statedef-dir-ltr-5">ltr</a>".</p>
      <p>Otherwise, <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-13">the directionality</a> of the element the same as the element’s parent element’s <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-14">directionality</a>.</p>
     </dd><dt> If the element has a parent element and the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-13">dir</a></code> attribute is not in a defined
      state (i.e., it is not present or has an invalid value) 
     </dt><dd> <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-15">The directionality</a> of the element is the same as the element’s parent element’s <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-16">directionality</a>. 
    </dd></dl>
    <p class="note" role="note"> Since the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-14">dir</a></code> attribute is only defined for <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-30">html elements</a>, it cannot be
    present on elements from other namespaces. Thus, elements from other namespaces always just
    inherit their <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-17">directionality</a> from their parent element, or, if they don’t have one,
    default to "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-ltr" id="ref-for-attr-valuedef-global-dir-ltr-2"><code>ltr</code></a>". </p>
    <div class="impl">
     <p class="note" role="note"> This attribute <a href="dom.html#bidireq">has rendering requirements involving the bidirectional algorithm</a>. </p>
    </div>
    <hr>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="directionality of the attribute|directionality of an attribute" data-noexport="" id="directionality-of-the-attribute">directionality of an attribute</dfn> of an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-31">HTML element</a>, which is used when the
  text of that attribute is to be included in the rendering in some manner, is determined as per the
  first appropriate set of steps from the following list:</p>
    <dl class="switch">
     <dt> If the attribute is a <a data-link-type="dfn" href="dom.html#directionality-capable-attributes" id="ref-for-directionality-capable-attributes-1">directionality-capable attribute</a> and the element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-15">dir</a></code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto" id="ref-for-statedef-dir-auto-4">auto</a> state 
     </dt><dd>
       Find the first character (in logical order) of the attribute’s value that is of bidirectional
      character type L, AL, or R. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a> 
      <p>If such a character is found and it is of bidirectional character type AL or R, the <a data-link-type="dfn" href="dom.html#directionality-of-the-attribute" id="ref-for-directionality-of-the-attribute-1">directionality of the attribute</a> is "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-4"><code>rtl</code></a>".</p>
      <p>Otherwise, the <a data-link-type="dfn" href="dom.html#directionality-of-the-attribute" id="ref-for-directionality-of-the-attribute-2">directionality of the attribute</a> is "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-ltr" id="ref-for-attr-valuedef-global-dir-ltr-3"><code>ltr</code></a>".</p>
     </dd><dt>Otherwise
     </dt><dd> The <a data-link-type="dfn" href="dom.html#directionality-of-the-attribute" id="ref-for-directionality-of-the-attribute-3">directionality of the attribute</a> is the same as <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-18">the element’s directionality</a>. 
    </dd></dl>
    <p>The following attributes are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="directionality-capable-attributes">directionality-capable attributes</dfn>:</p>
    <ul>
     <li data-md="">
      <p><code>abbr</code> on <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-2">th</a></code> elements</p>
     </li><li data-md="">
      <p><code>alt</code> on <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-8">area</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-19">img</a></code>, and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-15">input</a></code> elements</p>
     </li><li data-md="">
      <p><code>content</code> on <code><a data-link-type="element" href="document-metadata.html#elementdef-meta" id="ref-for-elementdef-meta-9">meta</a></code> elements, if the <code>name</code> attribute specifies
a metadata name whose value is primarily intended to be human-readable rather than
machine-readable</p>
     </li><li data-md="">
      <p><code>label</code> on <code><a data-link-type="element" href="interactive-elements.html#elementdef-menuitem" id="ref-for-elementdef-menuitem-3">menuitem</a></code>, <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-4">menu</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-4">optgroup</a></code>, <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-9">option</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-track" id="ref-for-elementdef-track-2">track</a></code> elements</p>
     </li><li data-md="">
      <p><code>placeholder</code> on <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-16">input</a></code> and <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-13">textarea</a></code> elements</p>
     </li><li data-md="">
      <p><code>title</code> on all <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-32">html elements</a></p>
    </li></ul>
    <hr>
    <dl class="domintro">
     <dt><var>document</var> . <code>dir</code> [ = <var>value</var> ]
     </dt><dd>
       Returns the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-8">html</a></code> element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-16">dir</a></code> attribute’s value, if any. 
      <p>Can be set, to either "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-ltr" id="ref-for-attr-valuedef-global-dir-ltr-4"><code>ltr</code></a>", "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-rtl" id="ref-for-attr-valuedef-global-dir-rtl-5"><code>rtl</code></a>", or "<a data-link-type="attr-value" href="dom.html#attr-valuedef-global-dir-auto" id="ref-for-attr-valuedef-global-dir-auto-1"><code>auto</code></a>" to
      replace the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-9">html</a></code> element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-17">dir</a></code> attribute’s value.</p>
      <p>If there is no <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-10">html</a></code> element, returns the empty string and ignores new
      values.</p>
    </dd></dl>
    <div class="impl">
      The <code>dir</code> IDL attribute on an element must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-5">reflect</a> the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-18">dir</a></code> content attribute of that element, <a data-link-type="dfn" href="infrastructure.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values-1">limited to only known values</a>. 
     <p>The <code class="idl"><a data-link-type="idl" href="dom.html#dom-document-dir" id="ref-for-dom-document-dir-1">dir</a></code> IDL attribute on <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> objects must <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-6">reflect</a> the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-19">dir</a></code> content attribute of the <code><a data-link-type="element" href="semantics.html#elementdef-html" id="ref-for-elementdef-html-11">html</a></code> element,
    if any, <a data-link-type="dfn" href="infrastructure.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values-2">limited to only known values</a>. If there is no such element, then the attribute
    must return the empty string and do nothing on setting.</p>
    </div>
    <p class="note" role="note"> Authors are strongly encouraged to use the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-20">dir</a></code> attribute to indicate text direction
    rather than using CSS, since that way their documents will continue to render correctly even in
    the absence of CSS (e.g., as interpreted by search engines). </p>
    <div class="example" id="example-35ae5c22">
     <a class="self-link" href="dom.html#example-35ae5c22"></a> This markup fragment is of an IM conversation. 
<pre class="highlight"><span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u1"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Student<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> How do you write "What’s your name?" in Arabic?<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u2"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Teacher<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> ما اسمك؟<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u1"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Student<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> Thanks.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u2"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Teacher<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> That’s written "شكرًا".<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u2"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Teacher<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> Do you know how to write "Please"?<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">auto</span> <span class="na">class=</span><span class="s">"u1"</span><span class="nt">&gt;&lt;b&gt;&lt;bdi&gt;</span>Student<span class="nt">&lt;/bdi&gt;</span>:<span class="nt">&lt;/b&gt;</span> "من فضلك", right?<span class="nt">&lt;/p&gt;</span>
</pre>
     <p>Given a suitable style sheet and the default alignment styles for the <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-16">p</a></code> element,
    namely to align the text to the <i>start edge</i> of the paragraph, the resulting rendering could
    be as follows:</p>
     <p><img alt="Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would  be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that." height="157" src="images/im.png" width="366"></p>
     <p>As noted earlier, the <code>auto</code> value is not a panacea. The final paragraph in this
    example is misinterpreted as being right-to-left text, since it begins with an Arabic character,
    which causes the "right?" to be to the left of the Arabic text.</p>
    </div>
    <h5 class="heading settled" data-level="3.2.5.7" id="classes"><span class="secno">3.2.5.7. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-class"><code>class</code></dfn> attribute</span><a class="self-link" href="dom.html#classes"></a></h5>
    <p>Every <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-33">HTML element</a> may have a <code>class</code> attribute specified.</p>
    <p>The attribute, if specified, must have a value that is a <a data-link-type="dfn" href="infrastructure.html#set-of-space-separated-tokens" id="ref-for-set-of-space-separated-tokens-6">set of space-separated tokens</a> representing the various classes that the element belongs to.</p>
    <div class="impl"> The classes that an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-34">HTML element</a> has assigned to it consists of all the classes returned
    when the value of the <code>class</code> attribute is <a data-link-type="dfn" href="infrastructure.html#split-a-string-on-spaces" id="ref-for-split-a-string-on-spaces-3">split on spaces</a>. (Duplicates are
    ignored.) </div>
    <p class="note" role="note"> Assigning classes to an element affects class matching in selectors in CSS, the <code>getElementsByClassName()</code> method in the DOM, and other such features. </p>
    <p>There are no additional restrictions on the tokens authors can use in the <code>class</code> attribute, but authors are encouraged to use values that describe the nature of the content,
  rather than values that describe the desired presentation of the content.</p>
    <div class="impl">
     <hr>
     <p class="note" role="note"> The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-element-classname">className</a></code> and <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#dom-element-classlist">classList</a></code> IDL attributes,
      defined in the DOM specification, <a data-link-type="dfn" href="infrastructure.html#reflection" id="ref-for-reflection-7">reflect</a> the <code>class</code> content attribute. <a data-link-type="biblio" href="references.html#biblio-dom">[DOM]</a> </p>
    </div>
    <h5 class="heading settled" data-level="3.2.5.8" id="the-style-attribute"><span class="secno">3.2.5.8. </span><span class="content">The <dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" id="element-attrdef-global-style"><code>style</code></dfn> attribute</span><a class="self-link" href="dom.html#the-style-attribute"></a></h5>
    <p>All <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-35">html elements</a> may have the <code>style</code> content attribute set. This is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-style-attr/#syntax">CSS styling attribute</a> as defined by the CSS Styling Attribute Syntax specification. <a data-link-type="biblio" href="references.html#biblio-css-style-attr">[CSS-STYLE-ATTR]</a></p>
    <p>In user agents that support CSS, the attribute’s value must be parsed when the attribute is
    added or has its value changed, according to the rules given for <a data-link-type="dfn" href="https://www.w3.org/TR/css-style-attr/#syntax">CSS styling attributes</a>. <a data-link-type="biblio" href="references.html#biblio-css-style-attr">[CSS-STYLE-ATTR]</a></p>
    <p>However, if the <a data-link-type="dfn" href="https://www.w3.org/TR/CSP3/#should-block-inline">Should element’s inline behavior be blocked by Content Security Policy?</a> algorithm returns
    "<code>Blocked</code>" when executed upon the
    attribute’s element and "<code>style attribute</code>", then the style
    rules defined in the attribute’s value must not be applied to the element. <a data-link-type="biblio" href="references.html#biblio-csp3">[CSP3]</a></p>
    <p>Documents that use <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-style" id="ref-for-element-attrdef-global-style-4">style</a></code> attributes on any of their elements must still be
  comprehensible and usable if those attributes were removed.</p>
    <p class="note" role="note"> In particular, using the <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-style" id="ref-for-element-attrdef-global-style-5">style</a></code> attribute to hide and show content, or to convey
    meaning that is otherwise not included in the document, is non-conforming. (To hide and show
    content, use the <code>hidden</code> attribute.) </p>
    <hr>
    <dl class="domintro">
     <dt><var>element</var> . <code>style</code>
     </dt><dd> Returns a <code>CSSStyleDeclaration</code> object for the element’s <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-style" id="ref-for-element-attrdef-global-style-6">style</a></code> attribute. 
    </dd></dl>
    <div class="impl"> The <code>style</code> IDL attribute is defined in the CSS Object Model (CSSOM)
    specification. <a data-link-type="biblio" href="references.html#biblio-cssom">[CSSOM]</a> </div>
    <div class="example" id="example-bd1031b9">
     <a class="self-link" href="dom.html#example-bd1031b9"></a> In the following example, the words that refer to colors are marked up using the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-span" id="ref-for-elementdef-span-10">span</a></code> element and the <code>style</code> attribute to make those words show up in
    the relevant colors in visual media. 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>My sweat suit is <span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: green; background:</span>
<span class="s">transparent"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span> and my eyes are <span class="nt">&lt;span</span> <span class="na">style=</span><span class="s">"color: blue;</span>
<span class="s">background: transparent"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>.<span class="nt">&lt;/p&gt;</span>
</pre>
    </div>
    <h5 class="heading settled" data-level="3.2.5.9" id="embedding-custom-non-visible-data-with-the-data-attributes"><span class="secno">3.2.5.9. </span><span class="content"><dfn data-dfn-type="dfn" data-noexport="" id="embedding-custom-non-visible-data">Embedding custom non-visible data<a class="self-link" href="dom.html#embedding-custom-non-visible-data"></a></dfn> with the <code>data-*</code> attributes</span><a class="self-link" href="dom.html#embedding-custom-non-visible-data-with-the-data-attributes"></a></h5>
    <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="custom-data-attribute">custom data attribute</dfn> is an attribute in no namespace whose name starts with the
  string "<dfn class="dfn-paneled" data-dfn-for="global" data-dfn-type="element-attr" data-export="" data-lt="data-|data-*" id="element-attrdef-global-data"><code>data-</code></dfn>", has at least one character after the hyphen, is <a data-link-type="dfn" href="infrastructure.html#xml-compatible-xml-compatible" id="ref-for-xml-compatible-xml-compatible-1">XML-compatible</a>, and contains no <a data-link-type="dfn" href="infrastructure.html#uppercase-ascii-letters" id="ref-for-uppercase-ascii-letters-2">uppercase ASCII letters</a>.</p>
    <p class="note" role="note"> All attribute names on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-36">html elements</a> in <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-10">HTML documents</a> get ASCII-lowercased
    automatically, so the restriction on ASCII uppercase letters doesn’t affect such documents. </p>
    <p><a data-link-type="dfn" href="dom.html#custom-data-attribute" id="ref-for-custom-data-attribute-2">Custom data attributes</a> are intended to store custom data private to the page or
  application, for which there are no more appropriate attributes or elements.</p>
    <p>These attributes are not intended for use by software that is not known to the administrators of
  the site that uses the attributes. For generic extensions that are to be used by multiple
  independent tools, either this specification should be extended to provide the feature explicitly,
  or a technology like microdata should be used (with a standardized vocabulary).</p>
    <div class="example" id="example-b4e9ec5f">
     <a class="self-link" href="dom.html#example-b4e9ec5f"></a> For instance, a site about music could annotate list items representing tracks in an album with
    custom data attributes containing the length of each track. This information could then be used
    by the site itself to allow the user to sort the list by track length, or to filter the list for
    tracks of certain lengths. 
<pre class="highlight"><span class="nt">&lt;ol&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">data-length=</span><span class="s">"2m11s"</span><span class="nt">&gt;</span>Beyond The Sea<span class="nt">&lt;/li&gt;</span>
  ...
<span class="nt">&lt;/ol&gt;</span>
</pre>
     <p>It would be inappropriate, however, for the user to use generic software not associated with
    that music site to search for tracks of a certain length by looking at this data.</p>
     <p>This is because these attributes are intended for use by the site’s own scripts, and are not a
    generic extension mechanism for publicly-usable metadata.</p>
    </div>
    <div class="example" id="example-a69559aa">
     <a class="self-link" href="dom.html#example-a69559aa"></a> Similarly, a page author could write markup that provides information for a translation tool
    that they are intending to use: 
<pre class="highlight"><span class="nt">&lt;p&gt;</span>The third <span class="nt">&lt;span</span> <span class="na">data-mytrans-de=</span><span class="s">"Anspruch"</span><span class="nt">&gt;</span>claim<span class="nt">&lt;/span&gt;</span> covers the case of
<span class="nt">&lt;span</span> <span class="na">translate=</span><span class="s">"no"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span> markup.<span class="nt">&lt;/p&gt;</span>
</pre>
     <p>In this example, the "<code>data-mytrans-de</code>" attribute gives specific text for the
    MyTrans product to use when translating the phrase "claim" to German. However, the standard <code>translate</code> attribute is used to tell it that in all languages, "HTML" is to remain
    unchanged. When a standard attribute is available, there is no need for a <a data-link-type="dfn" href="dom.html#custom-data-attribute" id="ref-for-custom-data-attribute-3">custom data attribute</a> to be used.</p>
    </div>
    <p>Every <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-37">HTML element</a> may have any number of <a data-link-type="dfn" href="dom.html#custom-data-attribute" id="ref-for-custom-data-attribute-4">custom data attributes</a> specified, with any
  value.</p>
    <hr>
    <dl class="domintro">
     <dt><var>element</var> . <code>dataset</code>
     </dt><dd>
       Returns a <code>DOMStringMap</code> object for the element’s <code>data-*</code> attributes. 
      <p>Hyphenated names become camel-cased. For example, <code>data-foo-bar=""</code> becomes <code>element.dataset.fooBar</code>.</p>
    </dd></dl>
    <div class="impl">
      The <code class="idl"><a data-link-type="idl" href="dom.html#dom-htmlelement-dataset" id="ref-for-dom-htmlelement-dataset-1">dataset</a></code> IDL attribute provides convenient
    accessors for all the <code>data-*</code> attributes on an element. On
    getting, the <code>dataset</code> IDL attribute must return a <code>DOMStringMap</code> object, associated with the following algorithms, which expose these
    attributes on their element: 
     <dl>
      <dt data-md="">
       <p>The algorithm for getting the list of name-value pairs</p>
      </dt><dd data-md="">
       <ol>
        <li data-md="">
         <p>Let <var>list</var> be an empty list of name-value pairs.</p>
        </li><li data-md="">
         <p>For each content attribute on the element whose first five characters are the string
"<code>data-</code>" and whose remaining characters (if any) do not include any <a data-link-type="dfn" href="infrastructure.html#uppercase-ascii-letters" id="ref-for-uppercase-ascii-letters-3">uppercase ASCII letters</a>, in the order that those attributes are listed in the
element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-element-attribute">attribute list</a>, add a name-value pair to <var>list</var> whose name is
the attribute’s name with the first five characters removed and whose value is the
attribute’s value.</p>
        </li><li data-md="">
         <p>For each name in <var>list</var>, for each U+002D HYPHEN-MINUS character (-) in the name
that is followed by a <a data-link-type="dfn" href="infrastructure.html#lowercase-ascii-letters" id="ref-for-lowercase-ascii-letters-2">lowercase ASCII letter</a>, remove the U+002D HYPHEN-MINUS
character (-) and replace the character that followed it by the same character <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#converted-to-ascii-uppercase">converted to ASCII uppercase</a>.</p>
        </li><li data-md="">
         <p>Return <var>list</var>.</p>
       </li></ol>
      </dd><dt data-md="">
       <p>The algorithm for setting names to certain values</p>
      </dt><dd data-md="">
       <ol>
        <li data-md="">
         <p>Let <var>name</var> be the name passed to the algorithm.</p>
        </li><li data-md="">
         <p>Let <var>value</var> be the value passed to the algorithm.</p>
        </li><li data-md="">
         <p>If <var>name</var> contains a U+002D HYPHEN-MINUS character (-) followed by a <a data-link-type="dfn" href="infrastructure.html#lowercase-ascii-letters" id="ref-for-lowercase-ascii-letters-3">lowercase ASCII letter</a>, throw a "<code class="idl"><a data-link-type="idl" href="http://www.ecma-international.org/ecma-262/6.0/#sec-native-error-types-used-in-this-standard-syntaxerror">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/WebIDL-1/#idl-DOMException">DOMException</a></code> and abort
these steps.</p>
        </li><li data-md="">
         <p>For each <a data-link-type="dfn" href="infrastructure.html#uppercase-ascii-letters" id="ref-for-uppercase-ascii-letters-4">uppercase ASCII letter</a> in <var>name</var>, insert a U+002D HYPHEN-MINUS
character (-) before the character and replace the character with the same character <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p>
        </li><li data-md="">
         <p>Insert the string <code>data-</code> at the front of <var>name</var>.</p>
        </li><li data-md="">
         <p>Set the value of the attribute with the name <var>name</var>, to the value <var>value</var>, replacing any previous value if the attribute already existed. If <code>setAttribute()</code> would have thrown an exception when setting an attribute
with the name <var>name</var>, then this must throw the same exception.</p>
       </li></ol>
      </dd><dt data-md="">
       <p>The algorithm for deleting names</p>
      </dt><dd data-md="">
       <ol>
        <li data-md="">
         <p>Let <var>name</var> be the name passed to the algorithm.</p>
        </li><li data-md="">
         <p>For each <a data-link-type="dfn" href="infrastructure.html#uppercase-ascii-letters" id="ref-for-uppercase-ascii-letters-5">uppercase ASCII letter</a> in <var>name</var>, insert a U+002D HYPHEN-MINUS
character (-) before the character and replace the character with the same character <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p>
        </li><li data-md="">
         <p>Insert the string <code>data-</code> at the front of <var>name</var>.</p>
        </li><li data-md="">
         <p>Remove the attribute with the name <var>name</var>, if such an attribute exists. Do
nothing otherwise.</p>
       </li></ol>
       <p class="note" role="note"> This algorithm will only get invoked by the Web IDL specification for names that are given
  by the earlier algorithm for getting the list of name-value pairs. <a data-link-type="biblio" href="references.html#biblio-webidl">[WEBIDL]</a> </p>
     </dd></dl>
    </div>
    <div class="example" id="example-f6c4bee0">
     <a class="self-link" href="dom.html#example-f6c4bee0"></a> If a Web page wanted an element to represent a space ship, e.g., as part of a game, it would have
    to use the <code>class</code> attribute along with <code>data-*</code> attributes: 
<pre class="highlight"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spaceship"</span> <span class="na">data-ship-id=</span><span class="s">"30"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"fire"</span> <span class="na">onclick=</span><span class="s">"spaceships[this.parentNode.dataset.shipId].fire()"</span><span class="nt">&gt;</span>
    Fire
  <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
     <p>Notice how the hyphenated attribute name becomes camel-cased in the API.</p>
    </div>
    <p>Authors should carefully design such extensions so that when the attributes are ignored and any
  associated CSS dropped, the page is still usable.</p>
    <div class="impl"> User agents must not derive any implementation behavior from these attributes or values.
    Specifications intended for user agents must not define these attributes to have any meaningful
    values. </div>
    <p>JavaScript libraries may use the <a data-link-type="dfn" href="dom.html#custom-data-attribute" id="ref-for-custom-data-attribute-5">custom data attributes</a>, as they are considered to be part
  of the page on which they are used. Authors of libraries that are reused by many authors are
  encouraged to include their name in the attribute names, to reduce the risk of clashes. Where it
  makes sense, library authors are also encouraged to make the exact name used in the attribute
  names customizable, so that libraries whose authors unknowingly picked the same name can be used
  on the same page, and so that multiple versions of a particular library can be used on the same
  page even when those versions are not mutually compatible.</p>
    <div class="example" id="example-bc44f35f"><a class="self-link" href="dom.html#example-bc44f35f"></a> For example, a library called "DoQuery" could use attribute names like <code>data-doquery-range</code>, and a library called "jJo" could use attributes names like <code>data-jjo-range</code>. The jJo library could also provide an API to set which prefix to
    use (e.g., <code>J.setDataPrefix("j2")</code>, making the attributes have names like <code>data-j2-range</code>). </div>
    <h4 class="heading settled" data-level="3.2.6" id="requirements-relating-to-the-bidirectional-algorithm"><span class="secno">3.2.6. </span><span class="content"> Requirements relating to the bidirectional algorithm </span><a class="self-link" href="dom.html#requirements-relating-to-the-bidirectional-algorithm"></a></h4>
    <h5 class="heading settled" data-level="3.2.6.1" id="authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters"><span class="secno">3.2.6.1. </span><span class="content"> Authoring conformance criteria for bidirectional-algorithm formatting characters </span><a class="self-link" href="dom.html#authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters"></a></h5>
    <p><a data-link-type="dfn" href="dom.html#text" id="ref-for-text-8">Text content</a> in <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-38">html elements</a> with <code>Text</code> nodes in their <a data-link-type="dfn" href="dom.html#html-contents" id="ref-for-html-contents-4">contents</a>,
  and text in attributes of <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-39">html elements</a> that allow free-form text, may contain characters
  in the ranges U+202A to U+202E and U+2066 to U+2069 (the bidirectional-algorithm formatting
  characters). However, the use of these characters is restricted so that any embedding or overrides
  generated by these characters do not start and end with different parent elements, and so that all
  such embeddings and overrides are explicitly terminated by a U+202C POP DIRECTIONAL FORMATTING
  character. This helps reduce incidences of text being reused in a manner that has unforeseen
  effects on the bidirectional algorithm. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
    <p>The aforementioned restrictions are defined by specifying that certain parts of documents form <a data-link-type="dfn" href="dom.html#bidirectional-algorithm-formatting-character-ranges" id="ref-for-bidirectional-algorithm-formatting-character-ranges-1">bidirectional-algorithm formatting character ranges</a>, and then imposing a requirement on
  such ranges.</p>
    <p>The strings resulting from applying the following algorithm to an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-40">HTML element</a> <var>element</var> are <a data-link-type="dfn" href="dom.html#bidirectional-algorithm-formatting-character-ranges" id="ref-for-bidirectional-algorithm-formatting-character-ranges-2">bidirectional-algorithm formatting character ranges</a>:</p>
    <ol>
     <li data-md="">
      <p>Let <var>output</var> be an empty list of strings.</p>
     </li><li data-md="">
      <p>Let <var>string</var> be an empty string.</p>
     </li><li data-md="">
      <p>Let <var>node</var> be the first child node of <var>element</var>, if any, or null otherwise.</p>
     </li><li data-md="">
      <p><i>Loop</i>: If <var>node</var> is null, jump to the step labeled <i>end</i>.</p>
     </li><li data-md="">
      <p>Process <var>node</var> according to the first matching step from the following list:</p>
      <dl class="switch">
       <dt>If <var>node</var> is a <code>Text</code> node
       </dt><dd>Append the text data of <var>node</var> to <var>string</var>.
       </dd><dt>If <var>node</var> is a <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-3">br</a></code> element
       </dt><dt> If <var>node</var> is an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-41">HTML element</a> that is <a data-link-type="dfn" href="dom.html#flow-content" id="ref-for-flow-content-8">flow content</a> but that is not
      also <a data-link-type="dfn" href="dom.html#phrasing-content" id="ref-for-phrasing-content-17">phrasing content</a> 
       </dt><dd> If <var>string</var> is not the empty string, push <var>string</var> onto <var>output</var>, and let <var>string</var> be empty string. 
       </dd><dt>Otherwise
       </dt><dd>Do nothing.
      </dd></dl>
     </li><li data-md="">
      <p>Let <var>node</var> be <var>node</var>’s next sibling, if any, or null otherwise.</p>
     </li><li data-md="">
      <p>Jump to the step labeled <i>loop</i>.</p>
     </li><li data-md="">
      <p><i>End</i>: If <var>string</var> is not the empty string, push <var>string</var> onto <var>output</var>.</p>
     </li><li data-md="">
      <p>Return <var>output</var> as the <a data-link-type="dfn" href="dom.html#bidirectional-algorithm-formatting-character-ranges" id="ref-for-bidirectional-algorithm-formatting-character-ranges-3">bidirectional-algorithm formatting character ranges</a>.</p>
    </li></ol>
    <p>The value of a namespace-less attribute of an <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-42">HTML element</a> is a <a data-link-type="dfn" href="dom.html#bidirectional-algorithm-formatting-character-ranges" id="ref-for-bidirectional-algorithm-formatting-character-ranges-4">bidirectional-algorithm
  formatting character range</a>.</p>
    <p>Any strings that, as described above, are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="bidirectional-algorithm-formatting-character-ranges">bidirectional-algorithm formatting character ranges</dfn> must match the <code>string</code> production in the following ABNF, the character set for which is Unicode. <a data-link-type="biblio" href="references.html#biblio-abnf">[ABNF]</a></p>
<pre data-highlight="abnf">string        = *( plaintext ( embedding / override / isolation ) ) plaintext
embedding     = ( lre / rle ) string pdf
override      = ( lro / rlo ) string pdf
isolation     = ( lri / rli / fsi ) string pdi
lre           = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
rle           = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
lro           = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
rlo           = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
pdf           = %x202C ; U+202C POP DIRECTIONAL FORMATTING
lri           = %x2066 ; U+2066 LEFT-TO-RIGHT ISOLATE
rli           = %x2067 ; U+2067 RIGHT-TO-LEFT ISOLATE
fsi           = %x2068 ; U+2068 FIRST STRONG ISOLATE
pdi           = %x2069 ; U+2069 POP DIRECTIONAL ISOLATE
plaintext     = *( %x0000-2029 / %x202F-2065 / %x206A-10FFFF )
                ; any string with no bidirectional-algorithm formatting characters
</pre>
    <p class="note" role="note"> While the U+2069 POP DIRECTIONAL ISOLATE character implicitly also ends open embeddings and
    overrides, text that relies on this implicit scope closure is not conforming to this
    specification. All strings of embeddings, overrides, and isolations need to be explicitly
    terminated to conform to this section’s requirements. </p>
    <p class="note" role="note"> Authors are encouraged to use the <code>dir</code> attribute, the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-4">bdo</a></code> element, and
    the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-6">bdi</a></code> element, rather than maintaining the bidirectional-algorithm formatting
    characters manually. The bidirectional-algorithm formatting characters interact poorly with CSS. </p>
    <div class="impl">
     <h5 class="heading settled" data-level="3.2.6.2" id="user-agent-conformance-criteria"><span class="secno">3.2.6.2. </span><span class="content">User agent conformance criteria</span><a class="self-link" href="dom.html#user-agent-conformance-criteria"></a></h5>
     <p>User agents must implement the Unicode bidirectional algorithm to determine the proper ordering
    of characters when rendering documents and parts of documents. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
     <p>The mapping of HTML to the Unicode bidirectional algorithm must be done in one of three ways.
    Either the user agent must implement CSS, including in particular the CSS <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-content-3/#propdef-content">content</a> properties, and must have, in its user agent style sheet, the rules
    using those properties given in this specification’s <a href="rendering.html#rendering">§10 Rendering</a> section, or,
    alternatively, the user agent must act as if it implemented just the aforementioned properties
    and had a user agent style sheet that included all the aforementioned rules, but without letting
    style sheets specified in documents override them, or, alternatively, the user agent must
    implement another styling language with equivalent semantics. <a data-link-type="biblio" href="references.html#biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]</a> <a data-link-type="biblio" href="references.html#biblio-css3-content">[CSS3-CONTENT]</a></p>
     <p id="bidireq"> The following elements and attributes have requirements defined by the <a href="rendering.html#rendering">§10 Rendering</a> section that, due to the requirements in this section, are requirements on all user agents
      (not just those that <a data-link-type="dfn" href="infrastructure.html#rendering-support-the-suggested-default-rendering" id="ref-for-rendering-support-the-suggested-default-rendering-3">support the suggested default rendering</a>): </p>
     <ul>
      <li data-md="">
       <p><code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-dir" id="ref-for-element-attrdef-global-dir-21">dir</a></code> attribute</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdi" id="ref-for-elementdef-bdi-7">bdi</a></code> element</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-bdo" id="ref-for-elementdef-bdo-5">bdo</a></code> element</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-4">br</a></code> element</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-4">pre</a></code> element</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-14">textarea</a></code> element</p>
      </li><li data-md="">
       <p><code><a data-link-type="element" href="textlevel-semantics.html#elementdef-wbr" id="ref-for-elementdef-wbr-3">wbr</a></code> element</p>
     </li></ul>
    </div>
    <section>
     <h4 class="heading settled" data-level="3.2.7" id="wai-aria"><span class="secno">3.2.7. </span><span class="content">WAI-ARIA and HTML Accessibility API Mappings</span><a class="self-link" href="dom.html#wai-aria"></a></h4>
     <section>
      <h5 class="heading settled" data-level="3.2.7.1" id="aria-authoring-requirements"><span class="secno">3.2.7.1. </span><span class="content">ARIA Authoring Requirements</span><a class="self-link" href="dom.html#aria-authoring-requirements"></a></h5>
       Authors may use the ARIA <code>role</code> and <code>aria-*</code> attributes on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-43">HTML elements</a>, in accordance with the requirements described in the
  ARIA specifications, except where these conflict with the requirements specified in
  ARIA in HTML <a data-link-type="biblio" href="references.html#biblio-html-aria">[html-aria]</a>. These exceptions are intended to prevent authors from making assistive technology
  products report nonsensical states that do not represent the actual state of the document. <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> 
      <p class="note" id="aria-usage-note" role="note"><a class="self-link" href="dom.html#aria-usage-note"></a> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="do not set" data-noexport="" id="do-not-set"></dfn>In the majority of cases setting an ARIA <code>role</code> and/or <code>aria-*</code> attribute that matches the default implicit ARIA semantics is unnecessary and
   not recommended as these properties are already set by the browser. </p>
      <div class="note" role="note">
       <p>Authors are encouraged to make use of the following documents for guidance on using ARIA in
  HTML beyond that which is provided in this section:</p>
       <ul>
        <li><a href="https://w3c.github.io/aria-in-html/">Notes on Using ARIA in HTML</a> - A practical
    guide for developers on how to to add accessibility information to HTML elements using the
    Accessible Rich Internet Applications specification <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a>.
        </li><li><a href="https://w3c.github.io/aria/practices/aria-practices.html">WAI-ARIA 1.1 Authoring Practices</a> -
    An author’s guide to understanding and implementing Accessible Rich Internet Applications.
       </li></ul>
      </div>
     </section>
     <section class="impl">
      <h5 class="heading settled" data-level="3.2.7.2" id="aria-conformance-requirements"><span class="secno">3.2.7.2. </span><span class="content">Conformance Checker Implementation Requirements</span><a class="self-link" href="dom.html#aria-conformance-requirements"></a></h5>
      <p>Conformance checkers are required to implement document conformance requirements for use of the
  ARIA <code>role</code> and <code>aria-*</code> attributes on <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-44">HTML elements</a> , as defined in ARIA in HTML. <a data-link-type="biblio" href="references.html#biblio-html-aria">[html-aria]</a> </p>
     </section>
     <section class="impl">
      <h5 class="heading settled" data-level="3.2.7.3" id="user-agent-requirements"><span class="secno">3.2.7.3. </span><span class="content">User Agent Implementation Requirements</span><a class="self-link" href="dom.html#user-agent-requirements"></a></h5>
      <div>
       <p>User agents are required to implement ARIA semantics on all <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-45">HTML elements</a> , as defined in the ARIA  specifications <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> and <a href="https://w3c.github.io/aria/core-aam/core-aam.html">[core-aam-1.1]</a>. </p>
       <p>User agents are required to implement Accessibility API semantics on all <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-46">HTML elements</a>, as defined in the
  HTML Accessibility API Mappings specification <a href="https://w3c.github.io/aria/html-aam/html-aam.html">[html-aam-1.0]</a>.</p>
       <p>The ARIA attributes defined in the ARIA specifications do not have any effect on CSS
  pseudo-class matching, user interface modalities that don’t use assistive technologies, or the
  default actions of user interaction events as described in this specification.</p>
      </div>
      <section>
       <h6 class="heading settled" data-level="3.2.7.3.1" id="aria-role-attribute"><span class="secno">3.2.7.3.1. </span><span class="content">ARIA Role Attribute</span><a class="self-link" href="dom.html#aria-role-attribute"></a></h6>
        Every HTML element may have an ARIA <code>role</code> attribute specified. This is an ARIA Role
  attribute as defined by <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a>. 
       <p>The attribute, if specified, must have a value that is a set of space-separated tokens;
  each token must be a non-abstract role defined in the WAI-ARIA specification <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a>.</p>
       <div class="impl"> The WAI-ARIA role that an HTML element has assigned to it is the first non-abstract role found
    in the list of values generated when the <code>role</code> attribute is split on spaces. </div>
      </section>
      <section>
       <h6 class="heading settled" data-level="3.2.7.3.2" id="state-and-property-attributes"><span class="secno">3.2.7.3.2. </span><span class="content">State and Property Attributes</span><a class="self-link" href="dom.html#state-and-property-attributes"></a></h6>
        Every HTML element may have ARIA state and property attributes specified. These attributes are
  defined by <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a>. 
       <p>A subset of the ARIA State and Property attributes are defined as
  "<dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="global aria-* attributes|global States and properties" data-noexport="" id="global-aria--attributes">Global States and Properties</dfn>"
  in the <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> Specification.</p>
       <p>These attributes, if specified, must have a value that is the ARIA value type in the "Value" field
  of the definition for the state or property, mapped to the appropriate HTML value type according
  to <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a>.</p>
       <p>ARIA State and Property attributes can be used on any element. They   are not always meaningful,
  however, and in such cases user agents   might not perform any processing aside from including them
  in the DOM.   State and property attributes are processed according to the requirements of the
  HTML Accessibility API Mappings specification <a href="https://w3c.github.io/aria/html-aam/html-aam.html">[html-aam-1.0]</a>,
  as well as <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> and , as   defined in the ARIA  specifications <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> and <a href="https://w3c.github.io/aria/core-aam/core-aam.html">[core-aam-1.1]</a>.</p>
      </section>
     </section>
    </section>
    <section>
     <h5 class="heading settled" data-level="3.2.7.4" id="allowed-aria-roles-states-and-properties"><span class="secno">3.2.7.4. </span><span class="content">Allowed ARIA roles, states and properties</span><a class="self-link" href="dom.html#allowed-aria-roles-states-and-properties"></a></h5>
     <p><em>This section is non-normative.</em></p>
     <p class="note" role="note"> The following table provides an informative reference to the ARIA roles, states and properties
    permitted for use in HTML. All ARIA roles, states and properties are normatively defined in the <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> specification. Links to ARIA roles, states and properties in the table reference
    the normative <a data-link-type="biblio" href="references.html#biblio-wai-aria">[WAI-ARIA]</a> definitions. </p>
     <table>
      <caption> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Roles, States and Properties </caption>
      <thead>
       <tr>
        <th>Role
        </th><th>Description
        </th><th>Required Properties
        </th><th>Supported Properties
      </th></tr></thead><tbody>
       <tr>
        <td>any
        </td><td>ARIA <a data-link-type="dfn" href="dom.html#global-aria--attributes" id="ref-for-global-aria--attributes-2">global states and properties</a> can be used on any HTML element.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-atomic</code></p>
          </li><li data-md="">
           <p><code>aria-busy (state)</code></p>
          </li><li data-md="">
           <p><code>aria-controls</code></p>
          </li><li data-md="">
           <p><code>aria-describedby</code></p>
          </li><li data-md="">
           <p><code>aria-disabled (state)</code></p>
          </li><li data-md="">
           <p><code>aria-dropeffect</code></p>
          </li><li data-md="">
           <p><code>aria-flowto</code></p>
          </li><li data-md="">
           <p><code>aria-grabbed (state)</code></p>
          </li><li data-md="">
           <p><code>aria-haspopup</code></p>
          </li><li data-md="">
           <p><code>aria-hidden (state)</code></p>
          </li><li data-md="">
           <p><code>aria-invalid (state)</code></p>
          </li><li data-md="">
           <p><code>aria-label</code></p>
          </li><li data-md="">
           <p><code>aria-labelledby</code></p>
          </li><li data-md="">
           <p><code>aria-live</code></p>
          </li><li data-md="">
           <p><code>aria-owns</code></p>
          </li><li data-md="">
           <p><code>aria-relevant</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>alert</code>
        </td><td> A message with important, and usually time-sensitive, information. See related <code>alertdialog</code> and <code>status</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>alertdialog</code>
        </td><td> A type of dialog that contains an alert message, where initial focus goes to an element
          within the dialog. See related <code>alert</code> and <code>dialog</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>application</code>
        </td><td>A region declared as a web application, as opposed to a web document.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>article</code>
        </td><td> A section of a page that consists of a composition that forms an independent part of a
          document, page, or site. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>banner</code>
        </td><td> A region that contains mostly site-oriented content, rather than page-specific content. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>button</code>
        </td><td> An input that allows for user-triggered actions when clicked or pressed. See related <code>link</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-pressed (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>checkbox</code>
        </td><td>A checkable input that has three possible values: true, false, or mixed.
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-checked (state)</code></p>
         </li></ul>
        </td><td>
       </td></tr><tr>
        <td><code>columnheader</code>
        </td><td>A cell containing header information for a column.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-sort</code></p>
          </li><li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>combobox</code>
        </td><td> A presentation of a select; usually similar to a textbox where users can type ahead to
          select an option, or type to enter arbitrary text as a new item in the list. See related <code>listbox</code>. 
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-autocomplete</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>complementary</code>
        </td><td> A supporting section of the document, designed to be complementary to the main content at
          a similar level in the DOM hierarchy, but remains meaningful when separated from the main
          content. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>contentinfo</code>
        </td><td>A large perceivable region that contains information about the parent document.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>definition</code>
        </td><td>A definition of a term or concept.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>dialog</code>
        </td><td> A dialog is an application window that is designed to interrupt the current processing of
          an application in order to prompt the user to enter information or require a response. See
          related <code>alertdialog</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>directory</code>
        </td><td>A list of references to members of a group, such as a static table of contents.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>document</code>
        </td><td> A region containing related information that is declared as document content, as opposed
          to a web application. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>form</code>
        </td><td> A landmark region that contains a collection of items and objects that, as a whole,
          combine to create a form. See related <code>search</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>grid</code>
        </td><td> A grid is an interactive control which contains cells of tabular data arranged in rows and
          columns, like a table. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-multiselectable</code></p>
          </li><li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>gridcell</code>
        </td><td>A cell in a grid or treegrid.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>group</code>
        </td><td> A set of user interface objects which are not intended to be included in a page summary or
          table of contents by assistive technologies. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>heading</code>
        </td><td>A heading for a section of the page.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>img</code>
        </td><td>A container for a collection of elements that form an image.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>link</code>
        </td><td> An interactive reference to an internal or external resource that, when activated, causes
          the user agent to navigate to that resource. See related <code>button</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>list</code>
        </td><td> A group of non-interactive list items. See related <code>listbox</code>.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>listbox</code>
        </td><td> A widget that allows the user to select one or more items from a list of choices. See
          related <code>combobox</code> and <code>list</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-multiselectable</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>listitem</code>
        </td><td>A single item in a <code>list</code> or <code>directory</code>.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-posinset</code></p>
          </li><li data-md="">
           <p><code>aria-setsize</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>log</code>
        </td><td> A type of live region where new information is added in meaningful order and old
          information may disappear. See related <code>marquee</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>main</code>
        </td><td>The main content of a document.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>marquee</code>
        </td><td> A type of live region where non-essential information changes frequently. See related <code>log</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>math</code>
        </td><td>Content that represents a mathematical expression. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>menu</code>
        </td><td>A type of widget that offers a list of choices to the user.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>menubar</code>
        </td><td> A presentation of menu that usually remains visible and is usually presented horizontally. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>menuitem</code>
        </td><td> An option in a group of choices contained by a <code>menu</code> or <code>menubar</code>. 
        </td><td>none
        </td><td>
       </td></tr><tr>
        <td><code>menuitemcheckbox</code>
        </td><td>A checkable menuitem that has three possible values: true, false, or mixed.
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-checked (state)</code></p>
         </li></ul>
        </td><td>
       </td></tr><tr>
        <td><code>menuitemradio</code>
        </td><td> A checkable menuitem in a group of <code>menuitemradio</code> roles, only one of which can
          be checked at a time. 
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-checked (state)</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-posinset</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-setsize</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>navigation</code>
        </td><td> A collection of navigational elements (usually links) for navigating the document or
          related documents. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>note</code>
        </td><td> A section whose content is parenthetic or ancillary to the main content of the resource. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>option</code>
        </td><td>A selectable item in a select list.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-checked (state)</code></p>
          </li><li data-md="">
           <p><code>aria-posinset</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-setsize</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>presentation</code>
        </td><td> An element whose implicit native role semantics will not be mapped to the accessibility
          API. 
        </td><td>none
        </td><td>
       </td></tr><tr>
        <td><code>progressbar</code>
        </td><td>An element that displays the progress status for tasks that take a long time.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-valuemax</code></p>
          </li><li data-md="">
           <p><code>aria-valuemin</code></p>
          </li><li data-md="">
           <p><code>aria-valuenow</code></p>
          </li><li data-md="">
           <p><code>aria-valuetext</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>radio</code>
        </td><td> A checkable input in a group of radio roles, only one of which can be checked at a time. 
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-checked (state)</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-posinset</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-setsize</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>radiogroup</code>
        </td><td>A group of radio buttons.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>region</code>
        </td><td> A large perceivable section of a web page or document, that the author feels is important
          enough to be included in a page summary or table of contents, for example, an area of the
          page containing live sporting event statistics. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>row</code>
        </td><td>A row of cells in a grid.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>rowgroup</code>
        </td><td>A group containing one or more row elements in a grid.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>rowheader</code>
        </td><td>A cell containing header information for a row in a grid.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-sort</code></p>
          </li><li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>scrollbar</code>
        </td><td> A graphical object that controls the scrolling of content within a viewing area,
          regardless of whether the content is fully displayed within the viewing area. 
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-controls</code></p>
          </li><li data-md="">
           <p><code>aria-orientation</code></p>
          </li><li data-md="">
           <p><code>aria-valuemax</code></p>
          </li><li data-md="">
           <p><code>aria-valuemin</code></p>
          </li><li data-md="">
           <p><code>aria-valuenow</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>search</code>
        </td><td> A landmark region that contains a collection of items and objects that, as a whole,
          combine to create a search facility. See related <code>form</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-orientation</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>separator</code>
        </td><td> A divider that separates and distinguishes sections of content or groups of menuitems. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-valuetext</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>slider</code>
        </td><td>A user input where the user selects a value from within a given range.
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-valuemax</code></p>
          </li><li data-md="">
           <p><code>aria-valuemin</code></p>
          </li><li data-md="">
           <p><code>aria-valuenow</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-orientation</code></p>
          </li><li data-md="">
           <p><code>aria-valuetext</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>spinbutton</code>
        </td><td>A form of range that expects the user to select from among discrete choices.
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-valuemax</code></p>
          </li><li data-md="">
           <p><code>aria-valuemin</code></p>
          </li><li data-md="">
           <p><code>aria-valuenow</code></p>
         </li></ul>
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-valuetext</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>status</code>
        </td><td> A container whose content is advisory information for the user but is not important enough
          to justify an alert, often but not necessarily presented as a status bar. See related <code>alert</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>tab</code>
        </td><td> A grouping label providing a mechanism for selecting the tab content that is to be
          rendered to the user. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-selected (state)</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>tablist</code>
        </td><td>A list of tab elements, which are references to tabpanel elements.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>tabpanel</code>
        </td><td> A container for the resources associated with a <code>tab</code>, where each <code>tab</code> is contained in a <code>tablist</code>. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>textbox</code>
        </td><td>Input that allows free-form text as its value.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-autocomplete</code></p>
          </li><li data-md="">
           <p><code>aria-multiline</code></p>
          </li><li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>timer</code>
        </td><td> A type of live region containing a numerical counter which indicates an amount of elapsed
          time from a start point, or the time remaining until an end point. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>toolbar</code>
        </td><td>A collection of commonly used function buttons represented in compact visual form.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>tooltip</code>
        </td><td>A contextual popup that displays a description for an element.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>tree</code>
        </td><td> A type of list that may contain sub-level nested groups that can be collapsed and
          expanded. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-multiselectable</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>treegrid</code>
        </td><td>A grid whose rows can be expanded and collapsed in the same manner as for a tree.
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-multiselectable</code></p>
          </li><li data-md="">
           <p><code>aria-readonly</code></p>
          </li><li data-md="">
           <p><code>aria-activedescendant</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-required</code></p>
         </li></ul>
       </td></tr><tr>
        <td><code>treeitem</code>
        </td><td> An option item of a tree. This is an element within a tree that may be expanded or
          collapsed if it contains a sub-level group of treeitems. 
        </td><td>none
        </td><td>
         <ul>
          <li data-md="">
           <p><code>aria-level</code></p>
          </li><li data-md="">
           <p><code>aria-posinset</code></p>
          </li><li data-md="">
           <p><code>aria-setsize</code></p>
          </li><li data-md="">
           <p><code>aria-expanded (state)</code></p>
          </li><li data-md="">
           <p><code>aria-checked (state)</code></p>
          </li><li data-md="">
           <p><code>aria-selected (state)</code></p>
         </li></ul>
     </td></tr></tbody></table>
    </section>
   </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="infrastructure.html#infrastructure"><span class="secno">2</span> <span class="content">Common infrastructure</span></a> — <a href="index.html#contents">Table of contents</a> — <a href="semantics.html#semantics"><span class="secno">4</span> <span class="content">The elements of HTML</span></a> →</p></body></html>
